没有javascript的2列响应式砌体式布局？答案

【问题标题】：2 column responsive masonry-like layout without javascript?没有javascript的2列响应式砌体式布局？
【发布时间】：2016-08-09 17:27:05
【问题描述】：

我有许多动态高度的 div，我想将它们放入两列中，然后立即显示，最好不要使用 javascript（以及诸如 packery、masonry 等库）。

我从display: inline-block jsbin开始

我也试过关注Easy Masonry Layout With Flexbox，但无济于事jsbin

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

当然，简单地使用 inline-block 会导致不必要的间隙：

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

【问题讨论】：

假设您希望这些元素从左到右然后向下穿过答案是否定的！

标签： html css flexbox

【解决方案1】：

您应该将 float:left css 设置为所有 div。

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

希望对你有所帮助。

【讨论】：

一旦项目高度不同，左浮动将不起作用
对我来说，即使高度不同，它也能正常工作。您也可以创建添加代码。还是笨蛋？
这里是 jsbin 上的示例，较高的 item 会破坏布局：jsbin.com/jugimuyone

【解决方案2】：

您现在可以使用CSS columns，而不必过多担心浏览器支持。较旧的 IE 版本是唯一的潜在障碍，具体取决于您的受众。还有很多浏览器怪癖需要解决，但我已经在生产中使用它们一段时间了。这是您今天唯一真正的砌石式布局选择，无需使用 JS。

【讨论】：

对不起，我应该澄清一下，项目需要从左到右，而不是典型的从上到下的列
@waffl 那么你应该能够从 flexbox 获得你需要的东西。只需在父级（align-content 和/或 justify-content、flex-direction）和子级（flex-grow/flex-shrink）See here 上使用这些参数

【解决方案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

【讨论】：

这似乎不起作用，因为顶行中仍然存在不需要的间隙