如何將div自動對齊到新列

Question

我有一個要顯示的圖標列表。我使用下面的佈局要做到這一點：

<div class="icons"> 
<div class="icon1"> 
img src="someimage" <p>Some test </p> 
</div> 
. 
. 
. 
</div> 

這是我使用的CSS：

.icons{ 
    margin-top:5px; 
    margin-left:5px;  
    left:0;   
} 
.icon1{  
    line-height:15px; 
    margin-top:8px;  
    width:75px; 
} 

如何修改這個，這樣，如果我增加更多div s的類icon1他們當達到max-height時，會在新列中對齊？

Answer 1

我不確定是否float：left會工作。根據我的經驗，這會導致div標籤並排添加，一旦它們到達父div的末尾，下一個將被添加到第一列的底部。他需要相反的@Jack

我建議使用jquery來檢查div標籤的高度是否超過父div。如果他們然後添加一個新的div並開始將style-div標籤添加到style =「float：left」的新div中。因此，如果您的初始DOM包含

< div class="icons" > </div> 

追加一個元件應的DOM更改爲

<div class="icons" > 
    <div class ="column" style="float:left"> 
     <div class="icon1" > <img src="" height="" width="" /> </div> 
    </div> 
</div> 

附加另一個元件應將其更改爲

<div class="icons" > 
    <div class ="column" style="float:left"> 
     <div class="icon1" > <img src="" height="" width="" /> </div> 
     <div class="icon2" > <img src="" height="" width="" /> </div> 
    </div> 
</div> 

附加超過母體的第三元件div會將DOM更改爲此

<div class="icons" > 
    <div class ="column" style="float:left"> 
     <div class="icon1" > <img src="" height="" width="" /> </div> 
     <div class="icon2" > <img src="" height="" width="" /> </div> 
    </div> 
    <div class ="column" style="float:left"> 
     <div class="icon3" > <img src="" height="" width="" /> </div> 
    </div> 
</div> 

Answer 2

你可以用CSS 'multi-columns'爲此，

demo

，但它仍然是一個Candidate Recommendation，所以support還是非常最小的，即使你可以使用供應商前綴得到它的工作（雖然不是沒有一些怪癖）在最新版本的Firefox，Chrome和Opera上。