2列のマガジンを模倣するページ

Question

これは単純な2列のページレイアウトではありません。むしろ、2列目の雑誌ページのように振る舞い、最初の列を塗りつぶして内容が始まり、最初の列の空白がなくなったときに2列目の列に移動するような、境界のあるCSSボックスを作成する方法です（テキストが追加されたか、またはフォントサイズが増えたため）。

MS Wordの2列のレイアウトがどのように機能しているかを写真で見てみると、問題を明確にするのに役立ちます。

コンテンツは、1列で始まる：

キーポイントは、我々は（それは簡単な問題です）第二に、最初の列となる属するコンテンツ事前に知っていないということです覚えておいてくださいフォントサイズを大きくし、カラム2に

コンテンツ流出：

は、それは、CSSでこれを行うことは可能ですか？

Answer 1

CSS3が答えを持っている：http://www.w3.org/TR/css3-multicol/

を参照してください：http://jsfiddle.net/thirtydot/bjfVe/

#container { 
    -moz-column-count: 2; 
    -moz-column-gap: 1em; 
    -moz-column-rule: 1px solid #666; 

    -webkit-column-count: 2; 
    -webkit-column-gap: 1em; 
    -webkit-column-rule: 1px solid #666; 

    column-count: 2; 
    column-gap: 1em; 
    column-rule: 1px solid #666; 
} 

ブラウザのサポートは...非常に予測可能である：http://caniuse.com/multicolumn