Question

我的大脑被炸了，所以如果这看起来非常简单，我深表歉意。

我有一个无序列表：

<ul class="activeList">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
   <li class="item">Item 4</li>
   <li class="item">Item 5</li>
   <li class="item">Item 6</li>
</ul>

我要做的就是将其垂直显示为两列，但在第4项之后，开始第二列。所以看起来像这样：

Item 1   |   Item 5
Item 2   |   Item 6
Item 3   |
Item 4   |

我已经尝试过CSS中的浮点数和列，但是我能得到的最好的是：

Item 1   |   Item 4
Item 2   |   Item 5
Item 3   |   Item 6

我希望将其限制在第4列，然后开始下一列。
我希望找到仅CSS的解决方案。

Answer 1

我通过使用flex-wrap和nth child实现了这一目标。看看codepen，应该很不言自明。如果没有，请告诉我！这样做的好处是，如果您只需要两列，那么它将起作用。

请参阅演示和codepen：

.activeList{
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;  
}

.item:nth-child(3n){
  page-break-after:always; 
  break-after: always;
}

<ul class="activeList">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
   <li class="item">Item 4</li>
   <li class="item">Item 5</li>
   <li class="item">Item 6</li>
</ul>

Answer 2

因此，我在发布问题后几乎立即偶然发现了最简单的纯CSS答案，所以我将与所有人分享：

UL需要具有固定的高度，以及CSS规则列填充：自动。确保LI的高度固定（可以修改），您可以调整LI的高度，直到需要包装的地方发生缠绕，无论您希望在第四个li或其他任何li之后进行包裹。 / p>

MAX()

case

Answer 3

imo最好和最简单的方法是使用flexbox。您必须按两部分细分列表：从元素1到4的第一部分/从元素5到6的第二部分。然后将它们包装到display flex容器中。

那样就可以了，看看代码片段：）

#container { /*The only CSS property you need*/
    display: flex;
}

<div id="container"> <!--flex container-->
    <ul class="activeList-1-4"> <!--first list-->
        <li class="item">
            Item 1
        </li>
        <li class="item">
            Item 2
        </li>
        <li class="item">
            Item 3
        </li>
        <li class="item">
            Item 4
        </li>
    </ul>
    <ul class="activeList-5-6"><!--second list-->
        <li class="item">
            Item 5
        </li>
        <li class="item">
            Item 6
        </li>
    </ul>
</div>

Answer 4

如果给定一个容器的高度，该容器为'activeList'并为该容器提供'display：inline-flex'和用于包装的flex wrap怎么办？ demo

.activeList{
  display: inline-flex;
  flex-direction: column;
  height: 72px;
  flex-wrap: wrap;
}

.item{
    padding: 0 5px;
}

无序列表：在开始新列之前限制列表项的数量

4 个答案: