两列水平流与CSS

Question

我希望实现与此类似的DIV流程：

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

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

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

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

Answer 1

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

使用column并为父级内的div设置inline-block，以便它不会离开部分

下面是粗略的例子

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不认为这可以通过使用relative职位来实现。你需要为你的div提供absolute位置。

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

查看实时示例 here 。

Answer 3

这不是我的问题的正确答案，但我做了解决方法：

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

我仍然对纯CSS解决方案感兴趣（并且很惊讶这对CSS来说并不容易），所以我想我会把这个问题保持开放。