CSS框"flow"/stacking (见截图)

Question

我有一个困难的时间，使盒子流，如所附的屏幕截图。由于我甚至不太确定这种技术的名称，所以谷歌搜索变得很困难。

使用jQuery的AJAX实现生成的框(如果这有区别的话)。

更新：谢谢乔纳森，这很接近，但很明显，我还没有很好地描述这个问题。每个框包含一个categoryHeading，与该标题相关的未知数量的记录(书签)可能是两个，可能是50个。

假设我有六个书签类别(框)。由于用户可以输入任意多或少的书签到每个类别(这也是无限的)，我真的不知道任何一个盒子会有多大。

在新附的插图中，我希望能更好地说明这一点。

我不喜欢固定数量的列，因为容器的宽度取决于用户的屏幕分辨率。因此，低分辨率只能容纳两列，而较高分辨率/更大的浏览器宽度则可以容纳五列。

我可以用http://welcome.totheinter.net/columnizer-jquery-plugin/来模仿它，但它并不完美，如果有一种strickly方式，那就更好了。

使用Jonathan建议的代码，如果每个类别包含大约相同数量的书签，并且我不介意使用固定的列布局，那么它会很好地工作，但是如果一个类别包含50个书签，而另一个类别只包含三个书签，那么很多空间就会被浪费掉。

见: Ole截图/插图

见:新插图

Answer 1

不是的。如果您不能指望列的数量，就没有CSS唯一的解决方案(尽管它看起来将在CSS3中存在--这是一个有趣的想法)。你需要JS。

Answer 2

它不过是三个主列，里面有方框：

<div class="col1">
  <div class="box1">Top Left Box</div>
  <div class="box2">Middle Left Box</div>
  <div class="box3">Bottom Left Box</div>
</div>
<div class="col2">
  <div class="box1">Top Center Box</div>
  <div class="box2">Middle Center Box</div>
  <div class="box3">Bottom Center Box</div>
</div>
<div class="col3">
  <div class="box1">Top Right Box</div>
  <div class="box2">Middle Right Box</div>
  <div class="box3">Bottom Right Box</div>
</div>

然后就是给每个盒子一个特定的高度，以及每个盒子的底部。

.col1, .col2, .col3 {
  margin:10px 5px;
  float:left;
  width:100px;
}
.col1 div, .col2 div, .col3 div {
  margin-bottom:10px;
}
.col1 .box1 {
  height:100px;
}