html - 使用 CSS 的两列水平流

Question

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

div 从左到右、从上到下流动的位置。

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

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

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

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