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

html垂直包装页面流

1 个答案: