javascript - 如何对齐具有不同高度的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 新块应用到具有类的 div 中，其中高度最小。