2

私の Web アプリケーション画面には、幅が同じで高さが異なる多くの領域があります。たとえば。私は6つのdivを持っています:

    <div style="height: 50px">1</div>
    <div style="height:150px">2</div>
    <div style="height:250px">3</div>
    <div style="height:130px">4</div>
    <div style="height:120px">5</div>
    <div style="height: 30px">6</div>

そしてCSS：

    div{
        border:1px solid red;
        float:left;
        width:100px;
    }

ブラウザは次のように表示します。

ここに画像の説明を入力

ブラウザー ウィンドウが幅の狭い div に変更されると、自動的にラップされます。ラップされた div は、最大の高さを持つ上部の div に従って配置されます。不必要に空白が画面に表示されます。

ここに画像の説明を入力

ラップされたすべての div を一番上に配置する方法はありますか?

ここに画像の説明を入力

4

2 に答える 2

2

これを試して...

http://masonry.desandro.com//

それはあなたが望む/必要とするものより少し派手かもしれません。しかし、これを修正するためのCSSオプションはありません。

于 2012-07-18T17:39:13.063 に答える
0

CSSでこれを行う方法がわかりません。JavaScriptの使用に抵抗がない場合は、 jQuery Masonryプラグインを使用すると、これを行うことができます。

于 2012-07-18T17:34:08.433 に答える