Question

希望这很简单，但我还无法解决这个问题。

我有像这样的容器和列表结构：

<aside id="container">
    <ul>
        <li>
        <li>
        etc...
    </ul>
</aside>

我需要的是让li元素列表垂直，就像它们现在一样，但是一旦它们到达旁边容器元素的底部（例如，高度：500px），则以下li元素向右浮动。我该怎么做（没有表！）？基本上，我需要的结果是：让标题列表垂直落下然后向右浮动（容器是水平的），创建一个新列。然后旁边的容器div自动调整宽度。

我会一直在上传新的标题，所以我需要它能够横向增长。

欢迎所有帮助！谢谢！

Answer 1

您在此处遇到的问题是您希望列表从上到下读取然后水平增长。您可以使用column-count CSS属性，但这意味着使用固定数量的列，这些列不会立即满足您的需求。我不确定是否有纯CSS方法来实现这一点，但你可以做的是使用一些简单的JavaScript来确定你需要的列数（项目总数/适合的项目数） 500px）然后动态添加\修改column-count CSS属性。

请注意，column-count属性不适用于IE版本＆lt; 10。

这是一个简单的working example。

Answer 2

以下是评论中的flexbox示例。

.container已获得display: flex，flex-direction: column和flex-wrap: wrap
容器的高度决定了有多少行。确保此px高度等于item height * number of rows

Here is a very good flexbox guide over on CSS Tricks。

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  list-style: none;
  flex-direction: column;
  flex-wrap: wrap;
  background: #e91e63;
  height: 190px;
}
.container li {
  background: #9c27b0;
  padding: 10px;
}

<ul class="container">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

创建列表，在到达div的底部时向右浮动元素（并且div宽度自动调整）

2 个答案: