html - 包裹非 float 元素

Question

我有一个这样的元素列表:

<div class="row">
  <div class="col-xs-12 row-title">
    <h1>Equal size items</h1>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      1
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      2
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      3
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      4
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      5
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      6
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      7
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      8
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      9
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      10
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      11
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      12
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      13
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      14
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      15
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      16
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      17
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      18
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      19
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      20
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      21
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      22
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      23
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      24
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      25
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      26
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      27
    </div>
  </div>
</div>

它们不是 float 的，所以它们会堆叠在一起，这正是我想要的。包含 .row 的高度设置为 500 像素。如果“列”超过容器的高度，我希望它们换行。如果可能的话，我想用 CSS 来做到这一点。

这是显示问题的图片:

这是一个代码笔示例，因此您可以看到我的问题:

http://codepen.io/r3plica/pen/xGorZR?editors=110

有谁知道仅用 CSS 是否可以解决这个问题？

Answer 1

.row
{
    height:500px;
    overflow:hidden;
    display:inline-block;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

你肯定需要手动调整，height和column-count可能是
JsFiddle
New JsFiddle