Question

我的父div是100% width and 500px height。

现在我想将多个div相同大小width:250px; height:80px一个放在另一个下面，一旦它越过父div的高度，它应该从当前列{{}的右边开始1}} S上。

Answer 1

您需要CSS列布局。像这样：

#parent {
    width: 100%;
    height: 500px;
    background: #eee;

    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
}
#parent .box {
    width: 250px;
    height: 80px;
    background: #AAA;
    margin-bottom: 10px;
    display: inline-block;
}

演示：http://jsfiddle.net/J8A24/

支持：browser support chart。
进一步阅读：Multiple Columns

对于IE，您可能希望使用多个polyfill中的一个或按原样保留，内联块将优雅地降级为IE。

Answer 2

使用某些PHP（未经测试）可实现：

<div style="width:100%;height:500px;position:relative;">
  <div class="innerContainer" style="float:left;width:250px;">
    <div class="innerDiv" style="height:80px;">
      <?php for($i = 1; $i < $numDivs; $i++) : ?>
        <?php if($i % 6 == 0) : ?>
          <!-- create new container div -->
          </div>
          <div class="innerContainer" style="float:left;width:250px;">
        <?php endif; ?>
        <!-- put stuff in child div here -->
      <?php endfor; ?>
    </div>
  </div>
</div>

或者您可以使用其他答案中提到的CSS列，但我习惯于处理旧浏览器中必须广泛支持的内容。

显示Div低于另一个

2 个答案:

演示：http://jsfiddle.net/J8A24/