如何在 DOMPDF 中实现 PDF 页面左右分栏布局

作者：袖梨 2026-08-15

本文详解使用 DOMPDF 实现 A4 页面左右并排布局的关键技巧，重点解决 .left 和 .right 两列内容错位到下一页的问题，通过 display: inline-block、box-sizing: border-box 及宽度微调确保同页渲染。

本文详解使用 DOMPDF 实现 A4 页面左右并排布局的关键技巧，重点解决 `.left` 和 `.right` 两列内容错位到下一页的问题，通过 `display: inline-block`、`box-sizing: border-box` 及宽度微调确保同页渲染。

DOMPDF 对 CSS 布局的支持有限（尤其不支持 Flexbox 或 Grid），默认块级元素（如 <div>）会独占一行，导致 .right 内容被强制换行至新页。要实现在同一页面内左右并列显示，必须显式启用行内块布局，并精确控制盒模型与尺寸。

✅ 正确的 CSS 布局方案

将 .left 和 .right 设置为 inline-block，并配合 vertical-align: top 避免基线对齐导致的意外间隙；同时启用 box-sizing: border-box，使 padding 和 border 包含在设定的宽度内，避免溢出：

.left, .right {display: inline-block;vertical-align: top;box-sizing: border-box;}.left {background-color: rgb(7, 72, 70);color: white;width: 39%;/* 留出 ~2% 余量防溢出 */height: 100vh; /* 使用 vh 替代 % 避免高度继承问题 */padding: 0.3in;}.right {width: 59%;/* 总宽 < 100%，防止换行 */padding: 0.3in;vertical-align: top;}

注意事项：

不要使用 float：DOMPDF 对浮动清除支持不稳定，易引发布局崩溃；
避免 height: 100%：DOMPDF 中父容器高度常未正确定义，推荐用 100vh 或省略高度依赖内容自适应；
禁用 flex/grid：DOMPDF 2.x 及更早版本完全不解析 Flexbox，强行使用将失效；
外边距慎用 margin：inline-block 元素间存在空白符间隙，建议用 font-size: 0 于父容器或移除 HTML 换行缩进。

? 完整修正后的 HTML 片段（关键部分）

<div class='container' style="font-size: 0;"> <!-- 消除 inline-block 间隙 --><div class='left'><!-- 左侧内容（个人信息、技能等） --><div class='name'><?php echo htmlspecialchars("$firstname $middlename $lastname"); ?></div><!-- ... 其他左侧结构 --></div><div class='right'><div class='achievements-section'><div class='right-heading'>ACHIEVEMENT</div><div style="margin-left: 0.3in;"><!-- 此处可动态插入成就列表 --><p>• Led team to deliver project 2 weeks ahead of schedule</p><p>• Certified AWS Solutions Architect (2024)</p></div></div></div></div>

? 调试建议

逐步验证宽度：先设 .left { width: 40%; } + .right { width: 58%; }，若仍换页，尝试 38% + 58% 并检查是否有隐藏 padding/margin；
启用调试模式：在 $dompdf->render() 前添加 $dompdf->set_option('debug_png', true);（需开启日志）辅助定位渲染异常；
升级 DOMPDF：确认使用 dompdf/dompdf:^2.0（PHP 8+ 推荐），旧版（v0.8.x）对 CSS 支持更弱。