这里有一个类似的问题，没有真正的答案：CSS 列错误 — 5 列计数仅显示 4 个（带图像）
我在用着column-count显示列中的元素（在本例中是一组section元素，但无论使用什么元素（显然），都会发生这种情况。
问题是 Chrome 和 Firefox（没有尝试过其他）并不总是遵循指定的列数。
如果我将其设置为 4，有时它会是 4，有时它会小于 4（谢天谢地，不会超过 4）。
如果我使用 Firebug（或类似的）来修改列中某些元素的高度，有时列会从 3 跳到 4。
这真的很奇怪，也很烦人，我希望有人知道为什么会发生这种情况，并希望如何解决它。
div {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
div img {
display: block;
margin: 0 0 10px;
}
<div>
<img src="http://placehold.it/80x80">
<img src="http://placehold.it/80x80">
<img src="http://placehold.it/80x80">
<img src="http://placehold.it/80x80">
<img src="http://placehold.it/80x80">
</div>
这是显示问题的 JSFiddle：http://jsfiddle.net/NY2Zx/您可以调整图像的尺寸以查看列数的变化。
在您的示例（jsfiddle）中，有 5 个大小相等的元素分布在 4 列中。由于它们不会彼此相邻（它们超过 4 个），因此第一列将包含 2 个元素。这定义了容器的高度，因此第二列也将获得 2 个元素，因此第三列剩下一个元素，第四列则没有。那里are四列，但第四列根本就是空的......
换句话说：容器的高度由将所有元素放入列数所需的最小高度决定。完成后，内容将从左侧开始填充到列中，每列将获得尽可能多的内容。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
