0

画像をフローティングで表示する必要がありますが、2つのサイズがあり、大きい方のサイズは4つの小さいサイズです。視覚的な例を次に示します。

http://minus.com/lbfCTUyQj0BHcf

私は先に進んで、別のSOの質問で提案されたクールなプラグインであるMasonryを使用しましたが、これまでのところしかかかりませんでした。

http://minus.com/mkF3uSMeo/

ご覧のとおり、まだ空きスペースがあります。

これについてどうやって行くのかアイデアはありますか？css、js、jquery、またはその他のライブラリであるかどうかに関係なく、どのソリューションも役立ちます（ソリューションをjqueryに適応させることができると思います）。

目標は空のスペースを持たないことですが、すべてが満たされ、レイアウトは流動的/流動的である必要があります。

ありがとう。

4

1 に答える 1

0

次のhtml構造（jqueryを介してクラスを追加する可能性があります）を考えると、次のcssは目的を達成するためにうまく機能するようです（フィドルを参照;現在IE7-9でのみテストされています）：

HTML

<img class="half top" />
<img class="half" />
<img class="full" />

CSS

.half,
.full {
    float: left;    
    margin: 0 10px 10px 0;
}

.half {
    width: 40px;
    height: 60px;
}

.full {
    width: 90px;
    height: 130px;
}

.half.top + .half {
    margin-left: -50px;
    margin-top: 70px;
}
于 2012-05-26T19:24:13.327 に答える