CSS多列布局与分页控制实战指南

一、多列文本布局

1.1 核心属性解析

多列布局是CSS中用于创建类似报纸、杂志的多栏文本展示方式的核心技术。

.container {
  column-count: 3;      /* 分为3列 */
  column-gap: 2em;      /* 列间距2em */
  column-rule: 1px solid #ddd; /* 列间分隔线 */
}

关键属性说明：

• column-count：指定列数（自动调整列宽）
• column-width：指定列宽（自动调整列数）
• column-gap：列间距（默认1em）

1.2 列填充控制

.article {
  column-fill: auto; /* 或 balance */
}

实践建议：

• auto：按顺序填充列（可能导致最后一列未填满）
• balance：尽量平衡各列高度（默认值）

二、列分隔与装饰

2.1 列分隔线

.magazine {
  column-rule-width: 1px;
  column-rule-style: dashed;
  column-rule-color: #999;
  /* 简写形式 */
  column-rule: 1px dashed #999;
}

2.2 跨列显示

h2 {
  column-span: all; /* 标题跨所有列 */
}

注意事项：

• 仅部分浏览器完全支持column-span
• 跨列元素会打断正常的列流布局

三、打印样式与分页控制

3.1 页面规则(@page)

@page {
  size: A4;
  margin: 2cm;
  marks: crop cross;
}

@page :first {
  margin-top: 5cm; /* 首页特殊样式 */
}

3.2 分页控制

.chapter {
  page-break-before: always; /* 章节前分页 */
}

figure {
  page-break-inside: avoid; /* 避免图表跨页 */
}

footer {
  page-break-after: always; /* 页脚后分页 */
}

分页属性对比：

四、实战案例

4.1 产品手册布局

.product-manual {
  column-count: 2;
  column-gap: 3em;
  column-rule: 1px solid #eee;
  
  h3 {
    column-span: all;
    page-break-before: always;
  }
  
  .warning {
    break-inside: avoid;
  }
}

4.2 打印优化方案

@media print {
  body {
    line-height: 1.5;
    font-size: 12pt;
  }
  
  nav, .ads {
    display: none;
  }
  
  article {
    column-count: 1; /* 打印时单列显示 */
  }
  
  img {
    max-width: 100%;
    break-inside: avoid;
  }
}

五、常见问题解答

Q：多列布局中内容顺序如何控制？
A：内容默认按垂直顺序排列，可使用column-fill: balance优化显示效果

Q：如何避免表格在多列布局中被拆分？
A：使用break-inside: avoid或为表格容器设置display: inline-block

Q：分页控制属性不生效怎么办？
A：确保元素不是浮动或绝对定位，检查父元素的overflow设置

最佳实践建议：

1. 移动设备上慎用多列布局（建议通过媒体查询禁用）
2. 打印样式应单独测试不同浏览器的预览效果
3. 使用@page规则时注意实际纸张尺寸与CSS单位的换算
4. 考虑使用CSS Fragmentation Module Level 3的新属性（如break-*）作为未来兼容方案