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

【问题标题】：DIV Vertically floating DIV arrange from up to down by rowsDIV 垂直浮动 DIV 按行从上到下排列
【发布时间】：2013-05-01 10:17:40
【问题描述】：

我正在尝试在容器内从上到下垂直定位 DIV。容器应垂直限制为 500 像素。所有不符合此限制的 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>

我的刨结果应该是这样的：

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

我的问题是：我做错了什么以及是否可以实施？谢谢！

【问题讨论】：

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

标签： css html styles css-float

【解决方案1】：

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

我的建议是将 div 布局为水平而不是垂直堆叠，从右到左。这很容易通过float:right 实现。完成后，您可以将整个容器旋转 90 度以获得等效的垂直布局。但是由于现在区域 div 的方向都将不正确，因此您还需要将这些 90 度朝相反的方向旋转回来。

类似这样的：

#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);
}

Fiddle example

注意容器上的负号margin-left，它会在旋转后调整位置——这需要匹配容器的“高度”（即max-width 属性）。 max-height 属性表示容器在被剪裁之前将达到的最大“宽度”。需要overflow:hidden 来强制容器增长以包含其浮动子元素。

另外，请注意，由于区域 div 现在是浮动的，它们之间的边距不会塌陷。解决此问题的一种方法是将边距限制在两侧（我使用了右侧和底部），然后通过在容器上使用 box-sizing:border-box 填充来模拟另一侧的边距。

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

此解决方案不适用于旧版本的 IE，但至少支持 IE9。

【讨论】：

【解决方案2】：

您可以使用 CSS 列 like in this jsfiddle demo 执行此操作，使用以下 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 之前的版本中运行，这并不奇怪。您可以使用 techniques from following ALA page 让它在 IE 中运行。

【讨论】：

【解决方案3】：

    #container {
      background-color: red;
      max-width: 330px;
      max-height: 300px;
      padding: 20px;
      overflow:auto;
    }

    .area {
      background-color: yellow;
      display: inline-block;
      height: 70px;
      margin-bottom: 21px;
      text-align: center;
      width: 70px;
    }

    .x {
      background-color: cyan;
      height: 30px;
      width: 90px;
    }

    .Z {
      background-color: grey;
      height: 300px;
      width: 190px;
    }

    <div id="container">
      <div class="area">area1</div>
      <div class="area">area2</div>
      <div class="area x">area3</div>
      <div class="area">area4</div>
      <div class="area x">area5</div>
      <div class="area Z">area6</div>
    </div>

【讨论】：