定位一個菜單，菜單項自動相互分隔成兩行

Question

對於一個手機網站我需要一個構造才能得到如下結果。 我們使用CMS，所以我有一些自動生成的HTML。

<ul> 
<li> 
    <a href="#">Main item 1</a> 
    <ul> 
     <li><a href="#">Sub</a></li> 
     <li><a href="#">Sub</a></li> 
     <li><a href="#">Sub</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">Main item 2</a> 
    <ul> 
     <li><a href="#">Sub</a></li> 
     <li><a href="#">Sub</a></li> 
     <li><a href="#">Sub</a></li> 
     <li><a href="#">Sub</a></li> 
     <li><a href="#">Sub</a></li> 
    </ul> 
</li> 
<li> 
    <a href="#">Main item 3</a> 
    <ul> 
     <li><a href="#">Sub</a></li> 
     <li><a href="#">Sub</a></li> 
     <li><a href="#">Sub</a></li> 
     <li><a href="#">Sub</a></li> 
     <li><a href="#">Sub</a></li> 
    </ul> 
</li> 

爲了使浮動元素或顯示inline-block的沒有解決的問題。

是否有可能通過這個HTML做到這一點，或者我創建兩列並將菜單項傳播到每一列？

我創建了一個CodePen：CodePen

Answer 1

如果你想讓它去排隊的空間，有效地我會用磚石庫。

下面是一個例子庫： https://github.com/desandro/masonry