浮动divs顶部到底部，然后从左到右在一个固定高度容器

I am trying to float DIVs vertically from top to bottom and from left to right in a fixed height container. Vetically floating DIV arrange from up to down by rows raises the same issue and a solution has been given in the cases where divs have the size height:width as 1:1. In my cases each div is a long rectangle and as expected the solution explained in the above post breaks.

我试图在一个固定高度的容器中垂直地从上到下，从左到右浮动div。浮动的DIV按照行从上到下排列，提出了同样的问题，对于DIV的大小高度为1:1的情况给出了解决方案。在我的例子中，每个div都是一个长矩形，正如预期的那样，上面的post break中解释了解决方案。

I was able to find another solution using a new css property called flex columns.The below given style does the job but it wont work in older versions of webkit.

我可以使用名为flex列的新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>

My planing result should be like this:

我的规划结果应该是这样的:

    ---------------------------->
    | -------- --------
    | |Area 1| |Area 5|
    | -------- --------
    | -------- --------
max | |Area 2| |Area 6|
500 | -------- --------
 px | --------
    | |Area 3|   etc..
    | --------
    | --------             /\
    | |Area 4|   etc....... |
    | --------   
    --------------------------->

The number of items in the list is arbitrary. As the number of items increases it should grow sideways.

列表中的项目数是任意的。随着物品数量的增加，它应该是横向的。

My questions is: Can we have any solution which works in older versions of webkit. I DONT need a solution which works across all browser. My product is specific to webkit.

我的问题是:我们能有任何在旧版本的webkit中起作用的解决方案吗?我不需要一个在所有浏览器上都能工作的解决方案。我的产品是webkit特有的。

Or it will be really helpful if someone can give pointers on the modifications to be made for the solution mentioned in the duplicate post I have mentioned.

或者，如果有人能指点我所提到的复文中所提到的解决方案的修改，那将会很有帮助。

1 个解决方案

#1

This should give you what you're looking for.

这会给你你想要的。

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

I added the color so I could see what I was working with.

我加上了颜色，这样我就能看到我在做什么了。

#1