多列布局
column-count/column-gap/column-rule 报纸式多栏排版
多列布局
column 系列属性实现报纸式多栏排版——文字自动从一栏流到下一栏。
学完本章你将： 掌握 column-count/column-gap/column-rule。
基本多列
css
.article {
column-count: 3; /* 分成 3 栏 */
column-gap: 30px; /* 栏间距 */
column-rule: 1px solid #ddd; /* 分隔线 */
}完整属性
css
.multi-col {
column-count: 3;
/* 或指定栏宽 */
column-width: 250px; /* 每栏最小宽度——自动计算栏数 */
column-gap: 40px; /* 栏间距 */
column-rule: 1px dashed #ccc; /* 分隔线 */
/* 标题跨栏 */
}
.multi-col h2 {
column-span: all; /* 跨所有栏 */
}防止断行
css
/* 标题/图片不跨栏断开 */
h2, img {
break-inside: avoid;
}
p {
break-inside: avoid; /* 段落尽量不跨栏 */
}响应式报纸布局
css
.article {
column-width: 300px; /* 每栏至少 300px——窄屏自动变一栏 */
column-gap: 30px;
}