将带章节的HTML文档配置为打印时的双栏布局

嗨，看起来你已经搭好了打印样式的基础架子，要实现你想要的双栏打印布局其实很简单，咱们用CSS的**多列布局（Multi-column Layout）**就能轻松搞定，完美适配你现有的A4打印设置。

我先把调整后的完整打印CSS给你，你可以直接替换或补充到现有代码里：

@media print {
    @page {
        size: a4;
        margin: 3cm 1.5cm;
    }
    .work {
        font-family: 'ITC Giovanni Std', sans-serif;
        /* 核心：开启双栏布局 */
        column-count: 2;
        /* 栏与栏之间的间距，可根据需求调整 */
        column-gap: 1.5cm;
        /* 可选：栏之间加分隔线 */
        column-rule: 1px solid rgba(0,0,0,0.2);
    }
    .work h1 {
        font-weight: bold;
        margin-bottom: 0.25cm;
        /* 避免标题被拆分到两栏/两页 */
        break-inside: avoid;
        page-break-inside: avoid;
        column-break-inside: avoid;
        /* 确保标题后不会立即换栏 */
        break-after: avoid;
    }
    .work .work-title {
        margin-bottom: 2cm;
        /* 让标题区块单独占满整页宽度，不参与双栏 */
        column-span: all;
    }
    .work .work-title hr {
        width: 2cm;
        opacity: 0.5;
        border: 0;
        border-top: 1px solid;
        color: inherit;
    }
    /* 如果你的章节是独立区块，比如每个章节用.chapter类包裹，加这个规则 */
    .work .chapter {
        /* 避免章节被拆分到两栏或跨页 */
        break-inside: avoid;
        page-break-inside: avoid;
        column-break-inside: avoid;
        margin-bottom: 1cm;
    }
}

我给你解释几个关键调整点：

• 核心的双栏控制是给.work加column-count: 2，直接把整个内容容器分成两栏；column-gap用来设置两栏之间的空白，我选了和页面侧边距一致的1.5cm，视觉上更协调；column-rule是可选的栏分隔线，嫌麻烦可以删掉。
• 给标题（h1）和章节区块加了break-inside: avoid这类属性，是为了避免重要内容被硬生生拆分到两栏或者跨页，保证排版的整洁性——毕竟没人想看到章节标题一半在左栏一半在右栏，对吧？
• 给.work-title加了column-span: all，让标题区域（包括那条短横线）单独占满整页宽度，不会被拆成两栏，符合你想要的排版逻辑。

如果你的HTML结构里章节是用独立的容器包裹的（比如每个章节是<div class="chapter">...</div>），一定要记得加上.work .chapter的规则，这样每个章节都会保持完整，不会被拆分到不同栏或页面。

你可以先在浏览器的打印预览里测试一下，调整column-gap或者各种margin值，直到排版完全符合你的预期~

备注：内容来源于stack exchange，提问作者Tobias