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

问题描述：

我有一个UL /锂列表，它的里元件应垂直堆叠，和一定数量的后包裹（或者第n个子或优选父母身高），像这样：如何垂直堆叠（和包裹）的CSS块元素的列表

1 4 
2 5 
3 6

怎么能这样做？（最好没有固定像素尺寸和绝对定位）

答

你在找什么是列数属性。通过一个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 
}

谢谢！问题在于子项目也在包装中。有没有办法告诉它不包裹中李，首先去关闭li标签，然后换行？ – petergus

我不相信这个解决方案会适用于你的情况，我认为你将需要使用一些JavaScript，但如果你发布你的HTML和需要的输出我可能会帮助 –

我想我根据你的指导来计算它，我将它添加到下面的答案中。 – petergus

答

我想通了这一点使用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他原来的答案在这里指点我在正确的方向！

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

相关推荐