html - 複数列レイアウトの 2 つの div の CSS3 幅、横並び

Question

複数列レイアウトの 2 つの div があります。それらを並べて表示したいのですが、(float のように) 試してみるとすべてが台無しになります。width:auto;問題は、幅をすべて取っていることだと思います。

よりよく説明するために jsfiddle を作成しました: http://jsfiddle.net/2fPZ2/

赤と紫の div は同じ行にある必要があります。

結果は、セクションが赤と紫の div である水平レイアウトでなければなりません。なにか提案を？

Answer 1

に追加-webkit-column-count:2するだけ.containerです。

CSS

.container{
    height:100%;
    width:100%;
    position:relative;
    background:red;
    -webkit-column-count: 2;
}

JSFiddle .

詳細: column-count。

Answer 2

あなたの答えは Matthew James Taylor の厚意によるものです:

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm