CSS列数不尊重
这里有一个类似的问题,没有真正的答案:CSS columns bug — 5 column count only showing 4 (with images)CSS列数不尊重
我使用column-count
显示列中的元素(在这种情况下,一组section
元素,但这种情况发生的元素,无论使用(显然))。
问题是,Chrome和Firefox(还没有尝试过其他)并不总是尊重指定的列数。
如果我将它设置为4,有时候它会是4,有时它会少于4(谢天谢地)。
如果我使用Firebug(或类似),有时修改的一些列的元素的高度列跳来跳去为3〜4
这是很奇怪的,真的很烦,我希望有人知道为什么发生这种情况,并希望如何解决这个问题。
下面是一个显示问题的JSFiddle:http://jsfiddle.net/NY2Zx/您可以使用图像的尺寸来查看列计数更改。
感谢
在你的例子(jsfiddle)中,有5个相同大小的元素被分配到4列中。由于它们不会彼此相邻(它们大于4),因此第一列将包含2个元素。这定义了容器的高度,所以第二列也会得到2个元素,所以第三列还有一个,第四列没有。有是四列,但第四个是简单的空...
换句话说:容器的高度是由所需的最小高度决定的,这是将所有元素放入列数所需的最小高度。一旦完成,内容将从左侧开始填充到列中,并且每列将获得尽可能多的内容。
这里工作的例子,但是像包装元素。
.wrap {
-webkit-columns: 4 auto;
-moz-columns: 4 auto;
columns: 4 auto;
}
.wrap .img {
display: block;
margin: 0 0 10px;
line-height: 0px;
}
如果变化的line-height然后再次的错误。如果写在本地HTML文件和Firefox和Chrome加载
这(在列元素上设置行高为0)实际上似乎工作 - 但为什么? :)编辑:或者......嗯。它在这里不起作用:http://jsfiddle.net/NY2Zx/它实际上不适用于我的真实世界的情况。我发现将宽度设置为px值而不是%可行。这几乎是随机的。 – powerbuoy 2012-05-12 12:44:09
我的例子工作,因为我用div的包装图像 – 2012-07-06 11:19:06
无论出于何种原因,我不确定为什么在文本尾部有一个空白段落会再次重新排列列。这不是一个理想的解决方案,因为它应该没有空元素流动,但对于遇到此问题的人仍然可以快速修复。
也将'margin-bottom'更改为'9px'或更少可以正常工作! – ManseUK 2012-03-13 11:53:50