結婚式スタイルのレイアウトのみCSS付き

Question

イメージでわかるように、すべてのボックスは異なる高さを持ち、ダブル幅のボックスがいくつかあります。

それが唯一の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 fallbackを追加する必要があります。