如何讓CSS多列布局在使用自動固定寬度列時使用適當的寬度？

有什麼辦法可以讓CSS Multi-column Layout Module自動適當的寬度？如何讓CSS多列布局在使用自動固定寬度列時使用適當的寬度？

.collection { 
    height: 100%; 
    -webkit-column-count: auto; 
    -webkit-column-width: 100px; 
    -webkit-column-gap: 0px; 
} 
.collection > div { 
    display: inline-block; 
    background-color: black; 
    width: 100%; 
    height: 100px; 
}

http://jsfiddle.net/zBsBG/

當使用12個元素，它現在目前自動設定.collection元素的寬度到視區的寬度。

我希望它有適當的寬度，具體取決於自動生成的列數。例如，當它的寬度爲3列時，寬度應該在300px左右（而不是視口的寬度）。

我錯過了什麼嗎？

編輯：雖然我知道我可以爲.collection元素指定一個寬度，，但是這會破壞專門設置列寬的目的，並且計數爲auto。我希望它是可變寬度。

這很容易用JavaScript手動解決，但我想盡量避免這種情況。

來源

2013-07-20 Michael

的問題是，已指定height: 100%，這意味着div元件將試圖垂直第一填充.collection元件。通過去除高度屬性，列將沿着寬度適當地平衡：因此：http://jsfiddle.net/QeD77/

編輯：http://jsfiddle.net/tG4P6/4/

來源

2013-08-02 09:21:43

容器元件的寬度仍然是的寬度：使用JS平衡寬度重拍的小提琴整個文件在你引用的小提琴中。 – Michael

我更新了小提琴。不幸的是，我只能得到這個與JS一起工作，但它確實工作，因爲我相信你的意圖。 –

我沒有看到你的小提琴的任何額外的修訂。可悲的是，我認爲JS方法是必要的，但是。我可能只是使用JS重新創建多列的東西，只是爲了更好，更可靠的瀏覽器兼容性。乾杯! – Michael

如何讓CSS多列布局在使用自動固定寬度列時使用適當的寬度？

回答

相關問題