带有 CSS 的两列水平流答案

【问题标题】：Two column horizontal flow with CSS带有 CSS 的两列水平流
【发布时间】：2014-12-05 06:12:48
【问题描述】：

我想实现类似这样的DIV流：

div 从左到右，从上到下流动。

如果我尝试浮动，3 从 2 结束的高度开始......所以我想知道......有没有办法用 CSS 做到这一点？

编辑：当我使用 PHP 从数据库中获取 div 时，我不能只将 2 移动到 3 或类似的东西。

编辑：div 的高度和数量也是可变的。

【问题讨论】：

可以用绝对位置吗？
不，因为高度是可变的。刚刚添加了一个澄清，谢谢！
重复问题：stackoverflow.com/questions/14649919/…

标签： html css layout multiple-columns

【解决方案1】：

演示 - http://jsfiddle.net/auhgk0jq/

使用column 并为父级内部的div 设置inline-block，这样它就不会离开该部分

下面是粗略的例子

.cont {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  width: 100%;
  -webkit-column-gap: 10px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 10px;
  /* Firefox */
  column-gap: 10px;
}
.cont div {
  width: 100%;
  height: 150px;
  margin: 4px 0;
  display: inline-block;
  vertical-align: top;
  background: cornflowerblue;
}
.cont .two,
.cont .six {
  height: 90px;
}

<div class="cont">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
  <div class="five">5</div>
  <div class="six">6</div>
</div>

【讨论】：

他说divs flow left to right and top to bottom.这种情况怎么解决？
他在评论中也提到了这一点如果我尝试使用第 2 列转到第 3 列，第 3 列从 2 以下开始并被删除 @AdityaPonkshe
我提到过，因为我打算这样做作为替代方案（如果没有办法做我想做的事，我很乐意使用它），将删除该部分。抱歉，有点晚了，我为此压力很久了。
@Vitorino Fernandes 他想要从第 1 块开始的第 2 块，你的效果在下面
在实现这个之后，我在（在这个例子中）“cont”div之后得到了空白，但只有在某些情况下（有超过2个项目）并且只有在Chrome中。 Opera 不显示空白，但只显示一次列，然后忽略其余部分。 Firefox 工作正常......所以我想我也不会使用它，直到它变得更加标准。

【解决方案2】：

我认为这不能通过使用relative 职位来实现。为此，您需要为您的 div 提供 absolute 位置。

在下面给出的示例中，高度是可变的。您可以添加任意数量的 div，但需要为每个 div 定义样式。

查看实时示例here。

【讨论】：

我无法获得一个 div 的高度，因此我无法正确定位 3、4 或 5（更不用说正确的顺序）。

【解决方案3】：

这不是我的问题的正确答案，而是我为解决它所做的解决方法：

对此有 Javascript 解决方案，例如 Wookmark 和 Masonry。我使用了后者，它以最低配置完全符合我的要求。

我仍然对纯 CSS 解决方案感兴趣（很惊讶这不是用 CSS 来实现的），所以我想我会留下这个问题。

【讨论】：