在列而不是行中布局的正方形的CSS网格
在列而不是行中布局的正方形的CSS网格
提问于 2012-01-13 05:55:04
我目前有一个由正方形DIVs (每个200px x 200px)组成的网格。
我从左上角开始，每一个都向左浮动，所以第二个在第一个的右边，第三个在右边，依此类推。当它耗尽容器中的水平空间时，很明显，下一个正方形会自动开始新的一行。
这是很棒的，如果你想要网格在每一行填满的时候垂直变长，但是我希望我的网格是三个正方形高并增长到右手边，所以第一个正方形在左上角，第二个在它下面，第三个在下面，然后(因为容器有600px高)第四个正方形应该开始一个新的列，并转到第一个的右边。
有没有可能在没有指定数量的正方形中实现这一点，这样它就可以在不借助javascript的情况下一直增长到新的列中？
IE6支持不是必需的。
任何帮助都将不胜感激。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-01-13 06:07:30
你可以试试CSS3的多列http://www.w3.org/TR/css3-multicol/，http://www.css3.info/preview/multi-column-layout/
使用如下属性
-moz-column-width: 5em;
-webkit-column-width: 5em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;http://jsfiddle.net/Txgnk/1/
看起来IE 10是第一个支持它的IE http://caniuse.com/multicolumn
Stack Overflow用户
发布于 2012-01-13 07:20:36
尝尝这个,
<style>
.parent {
height:600px;
white-space: nowrap;
}
.child {
width: 200px;
height: 600px;
display:inline-block;
}
.grand-child {
width: 200px;
height: 200px;
border: 1px solid;
}
</style>
<div class="parent">
<div class="child">
<div class="grand-child"></div>
<div class="grand-child"></div>
<div class="grand-child"></div>
</div>
<div class="child">
<div class="grand-child"></div>
<div class="grand-child"></div>
<div class="grand-child"></div>
</div>
...
...
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8842910
复制相关文章
相似问题
腾讯云开发者
