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

Question

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

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

我试图使用flex显示无济于事。

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的更多信息