css显示：什么？ - 一个接一个地安排盒子

Question

<div id="container">
  <div class="category-group">
    <h4>title</h4>
    <ul>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
  <div class="category-group">
    <h4>title</h4>
    <ul>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</div>

<style>
.category-group {
  display: inline-block;
  vertical-align: top;
}
</style>

我希望所有类别组一个接一个地排列并放在容器中。在这种情况下，第二个类别组将在第一个类别组下面，然后在第一个类别和第二个类别的右侧第三个，依此类推。

如果我尝试给出类别组显示：内联，那么所有类别组都会排列在一个长列中，这会打破容器。

Answer 1

我也遇到过这个问题。我最终使用jQuery Masonry来使我的div在一个固定宽度的容器内很好地堆叠。

据我所知，没有纯粹的CSS修复可以达到这个效果。