10

2 つの列があり、高さの異なる div を出現順に積み重ねたいと考えています。

div は動的に作成されます。

幅の 50% でのみフロートすると、すぐに div #4 が入ってくるいくつかの div よりも 5 倍高いという状況になります。次に、次の div は前の div の下に上揃えされます。

次のように完全に一致するように、子 div をコンテナーに合わせる必要があります。

----- -------
  1      2
-----
  3   -------
-----    4
  5
-----
  6
-----
  7   -------
-----    8
  9

----- 
 10   -------
        11
      -------
      -------
-----

これが私がやったことのコードスニペットです:

<style>
    .box {background:#20abff; color:#fff; width:50%; margin: 5px;}
    .left {float:left;}
    .right {float:right;}
    .container {width:205px;}
</style>
    <body>
        <div class="container">
            <div class="box left" style="height:60px;">1</div>
            <div class="box left" style="height:80px;">2</div>
            <div class="box left" style="height:30px;">3</div>
            <div class="box left" style="height:70px;">4</div>
            <div class="box left" style="height:60px;">5</div>
            <div class="box left" style="height:20px;">6</div>
            <div class="box left" style="height:40px;">7</div>
            <div class="box left" style="height:90px;">8</div>
            <div class="box left" style="height:30px;">9</div>
        </div>
    </body>

そしてそれはこれに似ています

http://dl.dropbox.com/u/142343/divstack.html

助けてくれてありがとう

4

2 に答える 2

12

これを JavaScript で行う必要があります。jQuery を使用している場合は、 Masonry という優れたプラグインがありますjQuery 以外のバージョンもあります。

GitHubの README を引用するには:

Masonry は、動的グリッド レイアウト スクリプトです。CSS フロートの裏側と考えてください。フローティングは要素を水平に配置してから垂直に配置しますが、Masonry は要素を垂直に配置し、各要素をグリッド内の次のオープン スポットに配置します。その結果、石工が壁に石をはめ込むように、さまざまな高さの要素間の垂直方向の隙間が最小限に抑えられます。

単一列のレイアウトは、おそらくあなたが探しているものです。


古いブラウザーを気にしない場合は、CSS3columnプロパティがあります。Quirksmodeには例があり、 MDNにはいくつかのドキュメントがあります。

于 2012-07-10T13:51:05.073 に答える
2

コンテナとして 2 つの div を使用し、このコンテナ div に両方の列を配置して、この div を左右にフロートさせます....動作する可能性があります...グリッド レイアウトも動作します。

于 2012-07-10T15:04:44.123 に答える