如何实现打印时内容自动流转至第二栏的双栏页面布局？

直接用CSS原生的**多列布局（Columns）**就能搞定，这是实现内容自动跨栏流转最省心的方案，完美适配打印场景，不需要JS干预。

核心实现代码 #

先看完整示例：

HTML结构

<div class="two-column-container">
  <h1>这是标题</h1>
  <p>这里是第一段内容，篇幅可以尽量长一点，测试内容到达栏底时是否会自动流到第二栏。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <div class="content-block">
    <p>这是一个嵌套div里的内容，同样会跟着自动流转。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>继续加内容，直到填满第一栏，看是否自动跳到第二栏。Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </div>
  <p>更多测试内容... Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>

CSS样式

/* 基础双栏布局 */
.two-column-container {
  columns: 2; /* 直接指定栏数为2 */
  column-gap: 2rem; /* 栏之间的间距，可根据需求调整 */
  padding: 1rem;
}

/* 避免元素被跨栏/跨页截断 */
.two-column-container h1,
.two-column-container p,
.two-column-container div {
  page-break-inside: avoid;
  break-inside: avoid;
}

/* 打印专属适配（可选） */
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .two-column-container {
    columns: 2;
    column-gap: 1.5rem;
    /* 确保打印时栏宽适配纸张 */
    column-width: calc(50% - 0.75rem);
  }
}

关键说明 #

• columns: 2是核心：浏览器会自动把容器内的内容分成两栏，当第一栏填满后，剩余内容自动流到第二栏，打印时也会遵循这个逻辑。
• 用break-inside: avoid和page-break-inside: avoid防止标题、段落、div这些元素被硬生生截断在栏中间或分页处，提升打印体验。
• 如果需要固定栏宽，可以换成columns: 300px 2;，这样浏览器会优先保证每栏宽度300px，再自动适配栏数（不过这里我们固定2栏，所以直接写columns:2更简单）。
• 打印媒体查询里的column-width是为了更精准适配纸张宽度，避免栏间距和宽度出现偏差。

这个方案完全原生，不需要依赖任何库，现代浏览器和打印设备都支持，完美匹配你要的效果。

内容的提问来源于stack exchange，提问作者Iury Landin