CSS框“；“流动”/堆叠（见屏幕截图）

我有一个困难的时间使盒子流动，如所附的屏幕截图所示。我甚至不太清楚这项技术叫什么，这使得谷歌搜索变得很困难

如果有区别，可以使用jQuery的AJAX实现生成带有属性的框

更新： 谢谢Jonathan，这很接近，但很明显我对这个问题描述得不够好。每个框包含一个类别标题，与该标题相关的记录（书签）数量未知——可能是两个，可能是50个

假设我有六个书签类别（框）。由于用户可以在每个类别中输入任意多或任意少的书签（这也是无限的），我真的不知道这些框有多大

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

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

我可以在某种程度上模仿这种使用方式，但它并不完美，如果有一种严格的CSS方式，我会更喜欢这种方式

使用Jonathan建议的代码，如果每个类别包含大约相同数量的书签，那么效果会很好，我可以使用固定的列布局，但是当一个类别包含50个书签，而另一个类别仅包含三个书签时，会浪费大量空间

---

它只不过是三个主列，其中包含方框：

<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>

---

没有。如果你不能依赖于列的数量，那么就没有CSS唯一的解决方案（尽管看起来CSS3中会有这样的解决方案——一个有趣的想法）。你需要JS。

让什么盒子流动？这是你想要实现的还是你已经实现的？发布一些源代码…我希望“书签”容器中的框流动。我现在只是在寻找可能的解决方案，因为我想不出来，所以还没有为这部分编写代码。这个答案在解决方案上，但不完全在那里。因为是一个块对象，所以本例中的div在编译时是一个叠在一起的。另外，可能需要div{background color:#CCCCCC；}。哦，你说得对，TPops，我忘了浮动col1-col3 div。

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