0

この次のモデルに新しい DIV を追加するには、Javascript コードが必要です。float left のようなデフォルトの順序を使用します。これらの項目は水平方向に並べられます。私を助けてください

<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>

私が得ている出力は

ここに画像の説明を入力

私はこのような必要があります

ここに画像の説明を入力

4

1 に答える 1

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 に適用します。

于 2013-03-30T10:31:45.463 に答える