不遵守 CSS 列数

Question

这里有一个没有真正答案的类似问题:CSS columns bug — 5 column count only showing 4 (with images)

我正在使用 column-count 来显示列中的元素(在本例中是一组 section 元素，但无论使用何种元素(显然)，都会发生这种情况) .

问题是 Chrome 和 Firefox(还没有尝试过其他的)并不总是遵守指定的列数。

如果我将它设置为 4，有时它会是 4，有时它会小于 4(谢天谢地，再也不会了)。

如果我使用 Firebug(或类似软件)修改列中某些元素的高度，有时列会从 3 跳到 4。

这真的很奇怪也很烦人，我希望有人知道为什么会发生这种情况并希望如何解决它。

这是一个显示问题的 JSFiddle:http://jsfiddle.net/NY2Zx/您可以调整图像的尺寸以查看列数的变化。

谢谢

Answer 1

在您的示例 (jsfiddle) 中，有 5 个大小相等的元素被分配到 4 列中。由于它们不会彼此相邻(它们超过 4 个)，因此第一列将包含 2 个元素。这定义了容器的高度，因此第二列也将获得 2 个元素，因此第三列剩余一个元素，第四列则没有。 有四列，但第四列是空的...

换句话说:容器的高度由将所有元素装入列数所需的最小高度决定。完成后，内容将从左侧开始填充到列中，每列将获得尽可能多的内容。