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/您可以使用图像的尺寸来查看列计数更改。

感谢

来源

2012-03-13 powerbuoy

也将'margin-bottom'更改为'9px'或更少可以正常工作！ – ManseUK 2012-03-13 11:53:50

在你的例子（jsfiddle）中，有5个相同大小的元素被分配到4列中。由于它们不会彼此相邻（它们大于4），因此第一列将包含2个元素。这定义了容器的高度，所以第二列也会得到2个元素，所以第三列还有一个，第四列没有。有是四列，但第四个是简单的空...

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

来源

2017-05-01 23:26:12 Johannes

正确的，人们会希望，如果我要求4列，我会得到4列:) – powerbuoy 2017-05-02 12:17:47

好吧，如果你有7个元素，你会看到4列...毕竟，第四个只是空的。 – Johannes 2017-05-02 12:18:48

我相信这是正确的，所以我会给你答案，但是这使得列计数在很多事情上几乎没有用。 – powerbuoy 2017-05-02 14:10:23

这里工作的例子，但是像包装元素。

.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加载

http://jsfiddle.net/NY2Zx/4/

来源

2012-05-12 12:22:21

这（在列元素上设置行高为0）实际上似乎工作 - 但为什么？ :)编辑：或者......嗯。它在这里不起作用：http://jsfiddle.net/NY2Zx/它实际上不适用于我的真实世界的情况。我发现将宽度设置为px值而不是％可行。这几乎是随机的。 – powerbuoy 2012-05-12 12:44:09

我的例子工作，因为我用div的包装图像 – 2012-07-06 11:19:06

检查这个http://www.w3.org/TR/css3-multicol/#pseudo-algorithm

的jsfiddle例子是工作的罚款。尝试指定宽度div元素。

来源

2012-05-24 10:03:05 gimley

无论出于何种原因，我不确定为什么在文本尾部有一个空白段落会再次重新排列列。这不是一个理想的解决方案，因为它应该没有空元素流动，但对于遇到此问题的人仍然可以快速修复。

来源

2017-05-01 23:20:28 creativename

CSS列数不尊重

回答

相关问题