Question

我试图在固定高度的容器中从上到下以及从左到右垂直浮动DIV。 Vetically floating DIV arrange from up to down by rows提出了同样的问题，并且在div具有大小高度：宽度为1：1的情况下给出了解决方案。在我的情况下，每个div都是一个长矩形，正如预期的那样，解决方案在上面的帖子中解释了。

我能够使用名为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。

如果有人可以指出我在上面提到的重复帖子中提到的解决方案的修改，那将会非常有用。

Answer 1

这可以为您提供您正在寻找的东西。

＆＃13;

.container {
    display:flex;
    flex-flow:column wrap;
    max-height:500px;
    background:#ccc;
}
.area {
    width:200px;
    height:100px;
    background:#444;
    margin: 1px;
}

＆＃13;

<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>

＆＃13;

我添加了颜色，所以我可以看到我正在使用的颜色。

将div从上到下浮动，然后在固定高度的容器中从左到右浮动

1 个答案: