Css DIV垂直浮动DIV按行从上到下排列

我试图在容器内从上到下垂直定位div。容器的垂直极限应为500px。所有不符合此限制的div都应浮动到下一行

<style>
#container {
    position:relative;
    background-color:red;
    max-width:500px;
    min-height:500px;
    }
#area {
    position:absolute;
    bottom: 0;
    background-color:yellow;
    margin:20px;
    width:100px;
    height:100px;

}
</style>

<div id="container">
    <div id="area1">area1</div>
    <div id="area2">area2</div>
    <div id="area3">area3</div>
    <div id="area4">area4</div>
    <div id="area5">area5</div>
    <div id="area6">area6</div>
</div>

---

我的问题是：我做错了什么，是否有可能实施？谢谢大家!

您可以使用CSS列，，使用以下CSS

     #container{
        position: relative;
        background-color: red;
        max-width: 500px;
        min-height: 500px;
        padding: 20px;

        -moz-box-sizing: border-box;
        box-sizing: border-box;

        -moz-column-width: 150px;
        -webkit-column-width: 150px;
        -o-column-width: 150px;
        column-width: 150px;
     }
     #area{
        background-color: yellow;
        display: inline-block;
        font: italic 45px/215px georgia;
        height: 215px;
        margin-bottom: 21px;
        text-align: center;
        width: 215px;
     }

演示中的大小已缩小，以适应较小的渲染帧大小

---

当然，这并不奇怪，在IE版本早于版本10的情况下是行不通的。您可能可以使用它在IE中工作。

CSS列起初似乎是一个很有前途的解决方案，但它们不会在添加或删除区域时自动调整容器的宽度

我的建议是，从右到左，将div放在水平而不是垂直的位置。使用

float:right

很容易实现这一点。一旦你有了它，你可以将整个容器旋转90度，以获得等效的垂直布局。但是，由于区域div现在都将被错误地定向，您还需要将这些90度旋转回相反的方向

大概是这样的：

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

#container {
  position:relative;
  background-color:red;
  max-width:500px;
  margin-left:-500px;
  max-height:500px;
  overflow:hidden;
  -webkit-transform:rotate(-90deg);
  -webkit-transform-origin:top right;
  -ms-transform:rotate(-90deg);
  -ms-transform-origin:top right;
  transform:rotate(-90deg);
  transform-origin:top right;
  padding:20px 0 0 20px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#area {
  background-color:yellow;
  margin:0 20px 20px 0;
  width:100px;
  height:100px;
  float:right;
  -webkit-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  transform:rotate(90deg);
}

请注意容器上左侧的负

边距

，用于调整旋转后的位置-需要与容器“高度”匹配（即

最大宽度

属性）。

max height

属性表示容器在剪裁之前将达到的最大“宽度”。需要使用

overflow:hidden

强制容器增长以包含其浮动子元素

另外，请注意，因为面积div现在是浮动的，所以它们之间的边距不会塌陷。解决这一问题的一种方法是将边距限制为只有两个边（我使用了右边距和下边距），然后通过在容器上填充

框大小：border box

来模拟其他边的边距

最后，在这个特定示例中，面积div的纵横比为1:1，这意味着我们不必担心在旋转后重新定位它们。如果宽度和高度不同，事情会变得稍微复杂一些

此解决方案在旧版本的IE上不起作用，但它至少支持IE9。

#容器{
背景色：红色；
最大宽度：330px；
最大高度：300px；
填充：20px；
溢出：自动；
}
.区域{
背景颜色：黄色；
显示：内联块；
高度：70像素；
边缘底部：21px；
文本对齐：居中；
宽度：70px；
}
.x{
背景色：青色；
高度：30px；
宽度：90px；
}
.Z{
背景颜色：灰色；
高度：300px；
宽度：190px；
}

区域1
区域2
区域3
区域4
区域5
区域6

多个“区域”id是无效的标记-请参阅1999 html规范。首先搜索并学习，这才是你真正的第一个问题。