浮动div从上到下，然后从左到右在固定高度的容器中 [英] Floating divs top to bottom and then left to right in a fixed height container

问题描述

我正在尝试在固定高度的容器中上下垂直放置DIV，并从左向右浮动这些DIV。 语音浮动DIV按行从上到下排列提出了同样的问题，并且在div的height：width值为1：1的情况下给出了解决方案。在我的情况下，每个div是一个长矩形，并且正如预期的那样，上面的帖子中解释了该解决方案。

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.

我能够使用名为flex的新css属性找到另一个解决方案

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.

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

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

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

我的问题是：我们可以提供在旧版Webkit中可用的解决方案吗？我不需要一个可以在所有浏览器上使用的解决方案。我的产品是特定于Webkit的。

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.

否则，如果有人可以对我提到的重复帖子中提到的解决方案进行修改，这将非常有帮助。

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.

推荐答案

这应该可以为您提供所需的内容。

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.

这篇关于浮动div从上到下，然后从左到右在固定高度的容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！