私は過去数日間、特定のWebページのデザインに取り組む方法に頭を悩ませようとしてきましたが、これまでのところ、エレガントな解決策を思い付くことができませんでした。
設計を簡単に要約すると、コンテナの高さは不均一（動的に生成）ですが、幅は同じ（流体）の3列のコンテナがあります。それらは、左から右に番号順になるようにレイアウトする必要があります。つまり、一番上の行に1-2-3、2番目の行に4-5-6というように続きます。
さて、私のナットを本当につぶしているのは、コンテナ間に多くの不要な「垂直方向の間隔」がないように、この整列をきれいに並べようとしていることです。説明のために、次のモックアップコード（コードブロックの下にJSFiddleとしても利用可能）を作成しました。
HTML
<div class="wrapper" id="wrapper">
<div class="container small" id="container_1">1</div>
<div class="container large" id="container_2">2</div>
<div class="container small" id="container_3">3</div>
<div class="container medium" id="container_4">4</div>
<div class="container small" id="container_5">5</div>
<div class="container medium" id="container_6">6</div>
<div class="container large" id="container_7">7</div>
<div class="container medium" id="container_8">8</div>
<div class="container large" id="container_9">9</div>
<div class="clearfix"></div>
</div>
CSS
.wrapper {
width: 100%;
padding: 5%;
}
.clearfix {
clear: both;
}
.container {
display: block;
float: left;
width: 25%;
margin: 2.5%;
color: white;
font-weight: bold;
text-transform: uppercase;
}
.small {
height: 100px;
background: red;
}
.medium {
height: 150px;
background: green;
}
.large {
height: 200px;
background: blue;
}
JSFiddle： http: //jsfiddle.net/tzikas/MYgNx/
注：列レイアウト自体は、デバイス幅に基づいて最終的に2/1列に分割されるため、これをエミュレートするために、JSFiddleに単純な[レイアウトの切り替え]ボタンを含めました。
私が理解するのを手伝って欲しいのは次のとおりです：
- たとえば、「1」と「5」または「2」と「6」の間の過度の垂直方向の間隔を取り除くにはどうすればよいですか？
- 「4」を「3」の下ではなく「1」の下に配置するにはどうすればよいですか（前のポイントも解決します）。
できれば、どんな種類のスクリプトでもDOMを操作せずにこれを解決したいのですが、そうしなければならない場合は、mooToolsが私の「好ましい毒」です。