CSS列数不受尊重

pow*_*uoy 5 css css3

这里有一个类似的问题没有真正的答案:CSS列错误 - 5列计数仅显示4(带图像)

我column-count用来显示列中的元素(在这种情况下是一组section元素,但无论使用哪个元素(显然)都会发生这种情况).

问题是Chrome和Firefox(没有尝试过其他人)并不总是尊重指定的列数.

如果我将它设置为4,有时它将为4,有时它将小于4(谢天谢地).

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

这真的很奇怪,真的很烦人,我希望有人知道为什么会这样,并希望如何解决它.

这是一个显示问题的JSFiddle:http://jsfiddle.net/NY2Zx/您可以使用图像的尺寸来查看列数更改.

谢谢

Joh*_*nes 4

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

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

  • 是的,如果我要求 4 列,人们会希望我能得到 4 列:) (2认同)
  • 我相信这是正确的,所以我会给你答案,但在我看来,这使得列计数对于很多事情来说几乎毫无用处。 (2认同)