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列數不尊重

回答

相關問題