CSS float下和左

Question

我有很多可變高度的div。我需要這些div彼此排序，但是當它們到達窗口的末端時 - >創建新的「列」。

現在的div四溢，但我需要創建新的「列」。

BTW：

我使用的解決方案：

-webkit-column-gap: 16px; 
-webkit-column-width: 230px; 

但我需要支持其他瀏覽器。

謝謝你的幫助！

Answer 1

要與CSS僅做到這一點，

一個選項將使用column-count和容器上的max-height。

看到DEMO

，但我不知道瀏覽器的前綴相同。

它有點做你想要的，至少在某種程度上，但你可能會更好的與JavaScript的東西。

編輯：這裏我粘貼CSS：

.container { 
    column-count: 3; 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    -ms-column-count: 3; 
    -o-column-count: 3; 

    vertical-align:text-top; 

    max-height:100px; 
} 

Answer 2

嘗試類似這樣： 其中maxHeight與窗口的高度完全相同。

<style type="text/css"> 
.maxHeight { 
    display:inline-table; 
    height:600px; 
    width:50px; 
    float:left; 
    background-color:#09F; 
    margin:3px; 
} 
.box { 
    display:inline-block; 
    height:50px; 
    width:50px; 
    background-color:#33F; 
    margin:2px; 
} 
</style> 


<span class="maxHeight"> 
    <span class="box"></span> 
    <span class="box"></span> 
    <span class="box"></span> 
    <span class="box"></span> 
</span> 

<span class="maxHeight"> 
    <span class="box"></span> 
    <span class="box"></span> 
    <span class="box"></span> 
    <span class="box"></span> 
</span> 

<span class="maxHeight"> 
    <span class="box"></span> 
    <span class="box"></span> 
    <span class="box"></span> 
    <span class="box"></span> 
</span> 

JavaScript來循環這將需要一點注意，但它是很有可能的。

Answer 3

解決此問題的另一種方法是使用jQuery獲取可用的窗口高度並根據此信息創建每個列。換句話說，但仍然使用jQuery，你使用Mansory jQuery（http://masonry.desandro.com/）插件或同位素（http://isotope.metafizzy.co/）。