我试图在一个固定高度的容器中从上到下和从左到右垂直浮动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>

我添加了颜色,这样我就可以看到我在用什么了。

10-06 04:34
查看更多