1

いくつかの div があり、すべて左にフロートされています。最初の div は、残りの 3 倍の幅で、少し短くなっています。小さい div がラップして次の「行」に入るときに、小さい div の最初の 3 つが大きい div の下部にぴったり重なるようにしたいと思います。(テキストで説明するのは少し難しいですが、フィドルでアイデアを得ることができます。)

どうすればこれを実現できますか?

マークアップ:

<div class="bigger"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>
<div class="smaller"></div>

スタイル：

.bigger {
    height: 40px;
    width: 308px;
    margin: 0 4px 4px 0;
    background: red;
    float: left;
}

.smaller {
    height: 60px;
    width: 100px;
    margin: 0 4px 4px 0;
    background: blue;
    float: left;
}

フィドルの左端の 3 つの青い div は、マージン (赤い div の下マージン 4px) に従って赤い div に対して整列する必要があります。

http://jsfiddle.net/PKBQH/

記録として、pinterest は、スクリプトを使用して各 div に絶対位置を割り当てることで、互い違いのフロートのようなレイアウトを実現しているように見えますが、これは私がやりたくないことです。

4

2 に答える 2

0

適切な幅の外側のボックスに全体をラップするだけです。

.outside {
    width: 324px;
}

...このような...

于 2013-09-03T18:36:22.490 に答える