CSS display属性：是什么？ - 将盒子按顺序排列

Question

CSS display属性：是什么？ - 将盒子按顺序排列

4

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

屏幕截图

我希望所有分类组都能依次排列并适合容器。在这种情况下，第二个分类组将直接放在第一个分类组下面，然后第三个分类组将在第一和第二个分类组的右侧，以此类推。

如果我尝试给分类组设置display:inline属性，则所有分类组都会排成一列，可能超出容器范围。

- Sergey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Cooning · Accepted Answer

我也遇到了这个问题。最后我使用了jQuery Masonry来使我的div在固定宽度的容器中很好地堆叠起来。

据我所知，没有一种纯CSS的解决方法可以实现这种效果。