Question

我有一个ul / li列表，其中 li 元素应垂直堆叠，并在某个数字（第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他原来的答案，指出我正确的方向!!

如何使用css垂直堆叠（和包装）块元素列表

2 个答案: