CSSでブロック要素のリストをスタックを垂直（ラップ）する方法

Question

私は李要素は、垂直をスタックし、（特定の番号の後にn番目の子または好ましくはいずれかををラップするべきでUL /李リストを持っています親の身長）：

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に感謝を！