0

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

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

并且将在页面允许的范围内进行。

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

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

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

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

4

1 回答 1

0

在这里找到了一个非常接近的帖子 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; }
于 2013-09-27T01:55:49.403 回答