2列响应砖石般的布局没有JavaScript？

Question

我有一些动态高度的div我想放在两列中，它们紧接着显示在另一列之后，理想情况下没有javascript（以及诸如packery，masonry等库）。

我已经开始display: inline-block jsbin

了

我也试过跟Easy Masonry Layout With Flexbox无效jsbin

我可以将DOM结构化为单独的列，但这并不理想，因为它们需要在移动设备上折叠成一列。

当然，简单地使用内联块会导致不必要的间隙：

编辑：更新了图表，以便更清楚地了解所需结果 - 从左到右的列没有不必要的间隙

Answer 1

你应该将float：left css设置为你所有的div。

<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

这是一个可以使用flex的解决方案 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