html - 如何让一个div的内容超过这个div的高度到下一列

Question

如果我没有很好地提出问题，我深表歉意，我希望让自己明白。基本上我有一个元素列表，这些元素分布在每一行中。我希望当这一行超过 div 的总大小时，列表将在前面的可用空间中继续。

<div>
  <ul>
    <li>
      1  
    </li>
    <li>
      2  
    </li>
    <li>
      3  
    </li>
    <li>
      4  
    </li>
    <li>
      5  
    </li>
    <li>
      6
    </li>      
  </ul>
</div>

div
{ 
 border: 1px solid red;
 height: 100px;
 width:300px;
}

我该怎么做？

https://jsfiddle.net/ug0f38b1/

Answer 1

我正在使用 flexbox 解决这个问题，方向设置为 column。您需要 ul 的高度来填充父容器，以便它知道何时中断。

随着列表的增长，元素自然分布。

div {
  border: 1px solid red;
  height: 100px;
  width: 300px;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  margin: 0;
}

<div>
  <ul>
    <li>
      1
    </li>
    <li>
      2
    </li>
    <li>
      3
    </li>
    <li>
      4
    </li>
    <li>
      5
    </li>
    <li>
      6
    </li>
  </ul>
</div>

jsFiddle

调整列间距

为此使用 flexbox 的一个好处是我们可以将 ul 设置为 inline-flex，这样可以轻松控制列间距。

jsFiddle