我为3列设置了响应式布局。每列中都有我们要销售的产品。有时可能会有3个项目,2个项目和1个项目。目前,当我删除1个项目时,它将显示在页面的2/3上,而将1/3留空。我如何创建它,以便在显示2或1个项目时使它们居中,并且最大宽度为640px?

/* -------- HTML ------------*/

<div class="item">Item1</div>
<div class="item">Item1</div>
<div class="item">Item1</div>

/* -------- CSS ------------*/

.item {
display: inline;
float: left;
width: 33.33%;
}

最佳答案

使用flexbox,容器将根据您拥有的item填充100%的空间。

的HTML

<div class="flex-row">
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
</div>

<div class="flex-row">
  <div class="item">Item1</div>
  <div class="item">Item2</div>
</div>

<div class="flex-row">
  <div class="item">Item1</div>
</div>


的CSS

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.item {
  flex: 1;
}


Here is an example

关于css - 从3列切换到2,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34164523/

10-12 12:46
查看更多