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

Question

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

<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