如何垂直堆疊（和包裹）的CSS塊元素的列表

Question

我有一個UL /鋰列表，它的裏元件應垂直堆疊，和一定數量的後包裹（或者第n個子或優選父母身高），像這樣：

1 4 
2 5 
3 6 

怎麼能這樣做？ （最好沒有固定像素尺寸和絕對定位）

Answer 1

你在找什麼是列數屬性。通過一個div類 包裹UL：

<div class="wrapper"> 
    <ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    </ul> 
</div> 
.wrapper{ 
    column-count: 2; 
    column-gap: 20px;//for spacing between 
} 

Answer 2

我想通了這一點使用break-inside: avoid;。

Here is a Codepen

和這裏是代碼

HTML

<ul class="parent-menu"> 
    <li class="parent-menu-item"> 
    <a href="#">Parent item 1hey!</a> 
    <ul class="child-menu"> 
     <li class="child-menu-item child-item-1"> 
     <a href="#">Child item 1</a> 
     <ul class="grandchild-menu"> 
      <li><a href="#">Grandchild item 1</a></li> 
      <li><a href="#">Grandchild item 2</a></li> 
      <li><a href="#">Grandchild item 3</a></li> 
      <li><a href="#">Grandchild item 4</a></li> 
      <li><a href="#">Grandchild item 5</a></li> 
      <li><a href="#">Grandchild item 6</a></li> 
      <li><a href="#">Grandchild item 7</a></li> 
      <li><a href="#">Grandchild item 8</a></li> 
      <li><a href="#">Grandchild item 9</a></li> 
     </ul> 
     </li> 
     <li class="child-menu-item child-item-2"> 
     <a href="#">Child item 2</a> 
     <li class="child-menu-item child-item-3"> 
     <a href="#">Child item 3</a>      
     <li class="child-menu-item child-item-4"> 
     <a href="#">Child item 4</a> 
     <ul class="grandchild-menu"> 
      <li><a href="#">Grandchild item 1</a></li> 
      <li><a href="#">Grandchild item 2</a></li> 
      <li><a href="#">Grandchild item 3</a></li> 
      <li><a href="#">Grandchild item 4</a></li> 
      <li><a href="#">Grandchild item 5</a></li> 
      <li><a href="#">Grandchild item 6</a></li> 
      <li><a href="#">Grandchild item 7</a></li> 
      <li><a href="#">Grandchild item 8</a></li> 
      <li><a href="#">Grandchild item 9</a></li> 
     </ul> 
     </li> 
     <li class="child-menu-item child-item-5"> 
     <a href="#">Child item 5</a> 
     <ul class="grandchild-menu"> 
      <li><a href="#">Grandchild item 1</a></li> 
      <li><a href="#">Grandchild item 2</a></li> 
      <li><a href="#">Grandchild item 3</a></li> 
      <li><a href="#">Grandchild item 4</a></li> 
      <li><a href="#">Grandchild item 5</a></li> 
      <li><a href="#">Grandchild item 6</a></li> 
      <li><a href="#">Grandchild item 7</a></li> 
      <li><a href="#">Grandchild item 8</a></li> 
      <li><a href="#">Grandchild item 9</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 

而跨瀏覽器的CSS（像往常一樣，見注大約IE在端部）

.child-menu { 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    column-count: 3; 
    -moz-column-gap: 40px; 
    -webkit-column-gap: 40px; 
    column-gap: 40px; 
} 
.child-menu-item { 
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid; 
    break-inside: avoid; 
} 

要在IE 9及更低版本上使用此工作，請按照this guide並在代碼筆中使用javascript。注意：盡我所見，javascript和CSS都必須外部鏈接。

你的結果應該是這樣的：

特別感謝Fadi Abo Msalam他原來的答案在這裏指點我在正確的方向！