我试图在一个固定高度的容器中从上到下和从左到右垂直浮动div。Vetically floating DIV arrange from up to down by rows提出了同样的问题,并且在div的大小-高度:宽度为1:1的情况下给出了解决方案。在我的例子中,每个div都是一个长矩形,正如上面的post breaks中所解释的那样。
我用一个叫做flex columns的新css属性找到了另一个解决方案,下面给出的样式可以解决这个问题,但在旧版本的webkit中是行不通的。
<style>
.container {
display:flex;
flex-direction:column;
}
.area {
width:200px;
height:100px;
}
</style>
<div class="container">
<div class="area">area1</div>
<div class="area">area2</div>
<div class="area">area3</div>
<div class="area">area4</div>
<div class="area">area5</div>
<div class="area">area6</div>
</div>
我的计划结果应该是这样的:
---------------------------->
| -------- --------
| |Area 1| |Area 5|
| -------- --------
| -------- --------
max | |Area 2| |Area 6|
500 | -------- --------
px | --------
| |Area 3| etc..
| --------
| -------- /\
| |Area 4| etc....... |
| --------
--------------------------->
列表中的项目数是任意的。随着项目数量的增加,它应该横向增长。
我的问题是:我们能有任何解决方案,在旧版本的webkit工作。我不需要一个可以在所有浏览器上运行的解决方案。我的产品是专门针对webkit的。
或者,如果有人能给我提到的重复文章中提到的解决方案的修改提供指针,这将非常有帮助。
最佳答案
这会给你你想要的东西。
.container {
display:flex;
flex-flow:column wrap;
max-height:500px;
background:#ccc;
}
.area {
width:200px;
height:100px;
background:#444;
margin: 1px;
}
<div class="container">
<div class="area">area1</div>
<div class="area">area2</div>
<div class="area">area3</div>
<div class="area">area4</div>
<div class="area">area5</div>
<div class="area">area6</div>
</div>
我添加了颜色,这样我就可以看到我在用什么了。