<分区>
html - 在 2 列或更多列中从上到下、从左到右堆叠可变高度、固定宽度的 div
我想在固定宽度和可变高度中布局可变高度但固定宽度 div em> 容器，因此子 div 看起来以一种砌体模式堆叠在一起，占据 2 列或更多列。
这是我想要的:
下面是我使用 float 或 FlexBox 得到的结果:
这是密码笔:http://codepen.io/anon/pen/xOLwVJ
<div class="container">
<div class="item">
</div>
<div class="item" style="height:250px;">
</div>
<div class="item" style="height:150px;">
</div>
<div class="item" style="height:200px;">
</div>
<div class="item" style="height:180px;">
</div>
</div>
此代码仅引用CodePen，并不代表此处的2张图片。
Flexbox 和 Floats 似乎都不起作用。我最接近让它工作的方法是使用列，但是它们在中间切掉了子 div - 文本没问题，但实际框不是这样。
我想要没有 JavaScript 的纯 HTML/CSS 解决方案。
最佳答案
事实证明，CSS 列毕竟是可能的。诀窍是在子元素上设置 display:inline-block 以防止子 div 在列换行的中间被切割。
<div class="container">
<div class="item">
</div>
<div class="item" style="height:250px;">
</div>
<div class="item" style="height:150px;">
</div>
<div class="item" style="height:200px;">
</div>
<div class="item" style="height:180px;">
</div>
</div>
还有 CSS:
.container {
margin: 0 auto;
width:600px;
background:#ddd;
display: block;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.item {
margin:10px;
background:red;
width:270px;
height:100px;
display:inline-block; /* this is to prevent div being cut in the middle when it flows onto the next column */
}
关于html - 在 2 列或更多列中从上到下、从左到右堆叠可变高度、固定宽度的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38227757/