我目前有一个用方形DIV制作的网格(每个200px x 200px)。
我已经从左上角开始并向左漂移,使第二个位于第一个的右侧,第三个位于右侧,依此类推。当它在容器中的水平空间用完时,下一个方块显然会自动开始一个新行。
如果你想让网格在每次填满时都垂直延长,这是很棒的,但是我希望我的高三个方格并且长到右边,所以第一个方格位于左上角,第二个在它下面,第三个在它下面,然后(因为容器是600px高)第四个方格应该开始一个新的列并转到第一个的右边。
是否有可能为未指定数量的正方形实现此目的,因此它不会在不使用javascript的情况下不断增长为新列?
不需要IE6支持。
真的很感激任何帮助。
答案 0 :(得分:2)
您可以尝试使用CSS 3的多列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;
看起来IE 10是第一个支持它的IE http://caniuse.com/multicolumn
答案 1 :(得分:0)
试试这个,
<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>