CSS 多列布局(multi-column)

column-count

设置元素内容分成的列数:

.column {
  column-count: 3;
}

column-gap

设置列与列之间的间距:

.column {
  column-gap: 20px;
}

column-rule

设置列边界样式:

.column {
  column-rule: 1px solid #ccc;
}

column-rule-color

设置列边界颜色。

column-rule-style

设置列边界样式,如实线/虚线。

column-rule-width

设置列边界宽度。

break-inside

控制内容是否允许在列边界内断行:

.column {
  break-inside: avoid; 
}

例子

<div class="column">
  <p>长文本内容...</p>
</div>

.column {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

多列布局可以很好地实现响应式布局,在不同屏幕下自动调整列数,提供更好的阅读体验。

效果：