html - CSSのみを使用した組積造スタイルのレイアウト

Question

画像でわかるように、すべてのボックスの高さが異なり、幅が2倍のボックスがいくつかあります。

CSSだけで組積造風のレイアウトを作成することは可能ですか？

Answer 1

css3 サポートを使用すると、次のことができます。

http://jsfiddle.net/huAxS/2/

.container {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    width: 360px;
}

.container div {
    display: inline-block;
    width: 100%;
    background-color: red;
}​

css3 がサポートされていないため、残念ながら js に頼る必要があります。

Answer 2

私は現在、同じ種類のレイアウト、ときどき倍幅のボックスが付いた2列のサイトで作業しています。私がやっていることは、他のコンテンツからダブルワイドを分離することです。例えば：

<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="double-wide">
</div>
<div class="two-columns">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

two-columns次に、CSS3列ソリューションをクラスだけに適用できます。IE9をサポートする必要がある場合は、残念ながらJavaScriptフォールバックを追加する必要があります。