CSS横向排序_让多个div盒⼦并排同⾏显⽰动态div横向排列充满⼀⾏，每列⼤⼩⾃适应，最终效果如下：
⼀⾏的div个数是不确定的。
⽅法1：使⽤table布局
<div>
<table width="100%">
<tr>
<td class="tbl">块1</td>
<td class="tbl">块2</td>
<td class="tbl">块3</td>
</tr>
</table>
</div>
.tbl{border:1px solid lightgray;}
⽅法2：使⽤display:table-cell布局
<div class="container">
<span class="item">块1</span>
<span class="item">块2</span>
<span class="item">块3</span>
<span class="item">块4</span>
</div>
.
container{display: table;width:100%;}
.item{
height: 100px;
html的flex布局border: 1px solid lightgray;
display: table-cell;
text-align: center;
vertical-align: middle;
}
⽅法3：使⽤flex布局
<div class="container">
<span class="item">塊狀1</span>
<span class="item">塊狀1</span>
<span class="item">塊狀1</span>
<span class="item">塊狀1</span>
<span class="item">塊狀1</span>
<span class="item">塊狀1</span>
<span class="item">塊狀1</span>
</div>
.container{display: flex;}
.item{  height: 100px; border-right: 1px solid lightgray;flex-grow:1;}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。