html垂直换行页面流

Question

假设我有一个按字母顺序排列的跨度列表。 通常使用 html，如果我创建一堆它们，比如 display:inline-block，它们会像这样显示：

  +------+------+------+
  |   a  |   b  |  c   |
  +------+------+------+
  |   d  |   e  |  f   |
  +------+      +------+
  |   g  |------+
  +------+

并且会在页面允许的范围内尽可能宽。

我怎样才能有一个固定的高度，然后向下堆叠直到填满，然后像这样转到下一列：

  +------+------+------+
  |   a  |   d  |   f  |
  +------+------+------+
  |   b  |   e  |   g  |
  +------+      +------+
  |   c  |------+
  +------+

其中每个方块都是一个包含元素。

这是一个有限的例子，我不希望它特别高 3，我不希望它填满它给定的任何垂直空间，然后继续下一列。

Answer 1

在这里找到了一个非常接近的帖子 Column layout in HTML(5)/CSS

我这样做的方法必须是在循环中的某处添加一个计数器，输出列的内容类似于 (%3)，然后每三分之一关闭列并清除浮点数。结构类似于以下......

<div class="myWrapper">

    <div class="col1">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div><!--col1-->
    <div class="clear"></div><!--clear-->

    <div class="col2">
        <div>d</div>
        <div>e</div>
        <div>f</div>
    </div><!--col2-->
    <div class="clear"></div><!--clear-->

    <div class="col3">
        <div>g</div>
        <div>h</div>
        <div>i</div>
    </div><!--col3-->
    <div class="clear"></div><!--clear-->

</div><!--myWrapper-->

.myWrapper{}
    .myWrapper > div{ float:left; width:30%; margin-right:1%; }
    .myWrapper > div:last-child{ margin-right:0; }
        .myWrapper div[class*='col'] > div{ max-height:200px; margin:10px 0; }
 .clear{ clear:both; }