2

cssでリストを作成したいのですが、やり方がよくわかりません。float が左にある div があり、幅は常に一定 (240px) ですが、高さは動的にすることができます。

計算する必要があるより多くのパラメーターは、行数も動的です。この図では3行ですが、( screen.width に基づいて) 4、5、または10行になる可能性があるため、このコードは使用できません:

<div class="row1">
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
</div>

<div class="row2">
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
</div>

<div class="row3">
    <div class="list-box"></div>
    <div class="list-box"></div>
    <div class="list-box"></div>
</div>

そして、これは私がcssで作りたい写真です: http://i.stack.imgur.com/usPlB.png :

前もって感謝します、ダニエル。

4

1 に答える 1

0

純粋な CSS でこれを実際に行うことはできません。何かを水平方向に配置する場所を動的に計算するには JavaScript が必要だからです。

ただし、スタンドアロン プログラムまたは jQuery プラグインとして機能する Masonry を使用できます。

于 2013-09-16T12:16:15.977 に答える