[英]html vertical wrapping page flow
Say I have a list of spans that's an alphabetical list. 假设我有一个按字母顺序排列的跨度列表。 Normally with html, if I create a bunch of them, say display:inline-block, they'll show up like so:
通常使用html,如果我创建了一堆,比如说display:inline-block,它们会像这样显示:
+------+------+------+
| a | b | c |
+------+------+------+
| d | e | f |
+------+ +------+
| g |------+
+------+
And will go as wide as the page will allow. 并且会在页面允许的范围内扩展。
How can I instead have a fixed height, and have then stack down till it fills up, then go to the next column like so: 我该如何改为具有固定的高度,然后堆叠下来直到填满,然后像下面那样转到下一个列:
+------+------+------+
| a | d | f |
+------+------+------+
| b | e | g |
+------+ +------+
| c |------+
+------+
Where each of those squares is a containing element. 这些正方形中的每一个都是包含元素。
It's a limited example, I don't want it to be 3 high in particular, I wan't it to fill whatever vertical space it's given, then go on to the next column. 这是一个有限的示例,我不希望它特别高3,我不要它填充任何给定的垂直空间,然后继续下一页。
A very close posting found here Column layout in HTML(5)/CSS 在此处找到非常接近的帖子HTML(5)/ CSS中的列布局
The way I would do this would have to be add a counter somewhere into the loop that outputs the columns say something like (%3) and after every third close the column and clear the float. 我这样做的方式是必须在循环的某处添加一个计数器,该计数器输出列时说类似(%3),然后每隔三分之一关闭列并清除浮点数。 The structure would be something like the following....
结构将类似于以下内容。
<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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.