如何對齊具有不同高度的div？

Question

我需要一個Javascript代碼來在這個模型中添加新的DIV。我將使用像左側浮動的默認排序，這些項目以水平方式排序。請幫我

<div id="maincontainer"> 

<div style="height:100px;width:150px; float:left; border:1px solid red; margin:5px;">smallest</div> 
<div style="height:200px;width:150px; float:left; border:1px solid red; margin:5px;">largest</div> 
<div style="height:150px;width:150px; float:left; border:1px solid red; margin:5px;">middle</div> 
<div style="height:100px;width:150px; float:left; border:1px solid red; margin:5px;">middle2</div> 
<div style="height:190px;width:150px; float:left; border:1px solid red; margin:5px;">middle3</div> 
<div style="height:160px;width:150px; float:left; border:1px solid red; margin:5px;">middle4</div> 

</div> 

 

<javascript> 
$('div').sort(function (a, b) { 
    return $(a).height() > $(b).height() ? 1 : -1; 
}).appendTo('body'); 
</javascript> 

輸出我得到的是

我需要這樣的

Answer 1

您可以創建3個或者需要具有固定寬度的列，並將塊置於此不帶浮動的位置。

例如：

<div id="first_col"> 
    <div class="block"> 
    content 
    </div> 
    <div class="block"> 
    content2 
    </div> 
</div> 

<div id="second_col"> 
    <div class="block"> 
    content 
    </div> 
    <div class="block"> 
    content2 
    </div> 
</div> 

<div id="last_col"> 
    <div class="block"> 
    content 
    </div> 
    <div class="block"> 
    content2 
    </div> 
</div> 

而被JS新塊apped與類，其中高度是最小的股利。