在HTML中管理容器的垂直溢出

Question

我有一个HTML结构：

<div style="max-height: 520px;">
  <div style="height: 250px;">
    [...]
  </div>
  <div style="height: 250px;">
    [...]
  </div>
    [...]
</div>

我希望我的div在GridView中的行为类似，如果达到主div的最大高度，则进入新列，就像在第二种情况下一样（对于可怕的MS Paint绘图而言）：

蓝色框是主要div而黑色框是次要div。我该怎么办？

Answer 1

这是你的意思：http://jsfiddle.net/m8LgG/

<div class="container">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

.container {
    max-height: 520px;
}

.container div {
height: 250px;
width: 250px;
border: 1px solid #33d;
border-radius: 10px;
float:left;
margin: 0 10px 10px;
}

最好不要使用内联样式。尝试并在语义上构建代码： - ）