如果达到高度，则将元素移动到新列

Question

我有一个四级菜单，在 level3 和 level4 上我想使用 4 列。当从第 4 级项目达到第一列高度时，元素将显示在下一列。

<pre>
https://jsfiddle.net/nbastreet/Lc9w2nqk/5/
</pre>

我尝试使用弹性显示无济于事。

Answer 1

很简单。 您只需要将 column-count 属性添加到您的菜单项容器 (<ul>)

<ul class="column">
  <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>
  <li>item</li>
</ul>

.column {
  column-count: 3;
}

这是一个例子https://codepen.io/kaiten/pen/ddrvMj

您可以了解更多关于列属性here