CSS 多列布局：实现纵向排列满后换列显示

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10
• Item 11
• Item 12
• Item 13
• Item 14
• Item 15
• Item 16
• Item 17
• Item 18
• Item 19
• Item 20

.multi-column-list {
  column-count: 2; /* 设置为2列 */
  column-gap: 20px; /* 列之间的间隔 */
}

要实现纵向排列满了后换另一列显示，可以使用 CSS 的 column-count 和 column-gap 属性来实现多列布局。

在上述示例中，ul 元素的 class 属性被设置为 'multi-column-list'，并且使用了 column-count 属性将列表分为两列。column-gap 属性设置了列之间的间隔为 20 像素。

这样，当 ul 元素中的 li 元素超过一列的容量时，将会自动换到另一列进行显示。