我为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/