これはおそらく、私よりも CSS をよく知っている人にとっては簡単なことです。
タイルのように配置したい多くの要素を持つ CSS レイアウトを作成しようとしています。各タイルは同じ幅 (高さは異なります) であるため、次に示すように自然に列に配置されます。
同じ行のすべての要素を同じ高さにする方法を知りたいです。タイルのコンテンツは (やや) 動的であるため、その高さがどうなるかはわかりません。理想的には、タイルはフィドルに示されているように流れ、広い画面ではより多くの列が表示され、狭い画面ではより少ない列が表示されます。数十のタイルが存在する可能性があります。
フィドルに表示されるコードは次のとおりです。
HTML のスポット:
<ul>
<li class="e">Element 1</li>
<li class="e">Element 2 Taller item</li>
<li class="e">Element 3</li>
<li class="e">Element 4</li>
<li class="e">Element 5</li>
<li class="e">Element 6</li>
<li class="e">Element 7</li>
<li class="e">Element 8</li>
</ul>
そして、ほんの少しの CSS:
.e {
display: inline-block;
border: 1px solid black;
margin: 5px;
padding: 3px;
width: 120px;
}