这里有一个类似的问题没有真正的答案:CSS列错误 - 5列计数仅显示4(带图像)
我column-count用来显示列中的元素(在这种情况下是一组section元素,但无论使用哪个元素(显然)都会发生这种情况).
问题是Chrome和Firefox(没有尝试过其他人)并不总是尊重指定的列数.
如果我将它设置为4,有时它将为4,有时它将小于4(谢天谢地).
如果我使用Firebug(或类似的)来修改列中某些元素的高度,有时列会从3跳到4.
这真的很奇怪,真的很烦人,我希望有人知道为什么会这样,并希望如何解决它.
这是一个显示问题的JSFiddle:http://jsfiddle.net/NY2Zx/您可以使用图像的尺寸来查看列数更改.
谢谢
在您的示例(jsfiddle)中,有 5 个大小相等的元素分布在 4 列中。由于它们不会彼此相邻(它们超过 4 个),因此第一列将包含 2 个元素。这定义了容器的高度,因此第二列也将获得 2 个元素,因此第三列剩下一个元素,第四列则没有。有四列,但第四列根本就是空的……
换句话说:容器的高度由将所有元素放入列数所需的最小高度决定。完成后,内容将从左侧开始填充到列中,每列将获得尽可能多的内容。