CSS多列：不是所有列都填充

有關將所有產品列爲項目的所有產品的概述。我給了多列的attribut，並將列數設置爲5.我有9個產品，所以第一行應該有5個項目，第二個應該有4個 - 對不對？CSS多列：不是所有列都填充

ul.products{ 
    -moz-column-count: 5; 
    -moz-column-gap: 30px; 
    -webkit-column-count: 5; 
    -webkit-column-gap: 30px; 
    column-count: 5; 
    column-gap: 30px; 
}

問題是隻有3列被填充。在第四和第五是沒有產品/列表項。我做了一個jsfiddle，所以你可以看到這個和實驗：http://jsfiddle.net/oliverspies/W8PE9/2/

爲什麼這樣的列表項排列？我需要做些什麼才能填滿所有欄目？

來源

2014-01-23 oliverspies

http://jsfiddle.net/W8PE9/20/ ...只是添加'高度：400'爲'products' – Anup

注意：在Internet Explorer 9和更早版本中不支持列計數屬性。 – Anup

但是在固定的高度上，很多靈活性都會丟失。我必須使用jQuery來計算所需的高度，但這是迄今爲止最好的解決方案。謝謝 – oliverspies

DEMO

.products{ 
    height: 400px; 
}

來源

2014-01-23 10:41:45 Anup

選中此1： - http://jsfiddle.net/glee/Fa722/ – Anup

注意：Internet Explorer 9和更早版本不支持column-count屬性。 – Anup

如果您刪除display:inline-block在.products li您將有你的5列。

看到這個FIDDLE

來源

2014-01-23 10:04:58

但是那麼所有的李必須有相同的高度 - 否則李的一部分可能被分成兩列。 – oliverspies

CSS多列：不是所有列都填充

回答

相關問題