javascriptを使用しない2列応答の石積みのレイアウト？

Question

私は動的な高さのdivsを2つの列に配置したいと思います。理想的にはjavascript（およびpackery、masonryなどのライブラリ）を使わずに表示します。私はdisplay: inline-blockjsbin

を始めました

は私も無駄jsbin

にEasy Masonry Layout With Flexboxを、次の試してみた私は別の列にDOMを構築することができますが、彼らはに崩壊する必要があるとして、これは理想的ではありませんモバイル上の単一の列。

EDIT：更新された図を、所望の結果についてより明確であることが単に本の線に沿って不要な隙間にインラインブロックの結果を使用してもちろん

、 - 不要な隙間のない左から右の列

Answer 1

すべてのdivにfloat：left cssを設定する必要があります。

<div style="float:left; display:inline-block;"> 
    these divs will be displayed next to each other. 
</div> 

これがあなたに役立つことを願っています。

Answer 2

CSS columnsを使用すると、ブラウザのサポートについてあまり心配する必要はありません。あなたの聴衆に応じて、より古いIEバージョンが唯一の潜在的なブロッカーです。また、まだまだブラウザのいくつかの欠点がありますが、私は今、それらを本番環境でしばらく使っています。 JSを使用せずに今日の石造りのレイアウトのための唯一の実際のオプションです。ここで

Answer 3

あなたはこの CSS

.flex-container {padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; } 
.flex-item {background: tomato; padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } 
#fl-item{height:200px;} 

そしてHTML

<ul class="flex-container"> 
    <li class="flex-item" id="fl-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
    <li class="flex-item">6</li> 
</ul> 

のためにフレックス使用することができますし、あなたはこれらの要素は左からに行くしたいと仮定すると、Plunker