本文详解使用 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>）会独占一行，导致 <code>.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%; /* 总宽 <blockquote>
<p>⚠️ 注意事项：</p>
<ul>
<li>
<strong>不要使用 <code>float</code></strong>：DOMPDF 对浮动清除支持不稳定，易引发布局崩溃；</li>
<li>
<strong>避免 <code>height: 100%</code></strong>：DOMPDF 中父容器高度常未正确定义，推荐用 <code>100vh</code> 或省略高度依赖内容自适应；</li>
<li>
<strong>禁用 <code>flex</code>/<code>grid</code></strong>：DOMPDF 2.x 及更早版本完全不解析 Flexbox，强行使用将失效；</li>
<li>
<strong>外边距慎用 <code>margin</code></strong>：<code>inline-block</code> 元素间存在空白符间隙，建议用 <code>font-size: 0</code> 于父容器或移除 HTML 换行缩进。</li>
</ul>
</blockquote><h3>? 完整修正后的 HTML 片段（关键部分）</h3><pre class="brush:php;toolbar:false;"><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 (2023)</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 支持更弱。
通过以上调整，.right 区域将稳定与 .left 并排呈现于同一 A4 页面内，彻底解决内容“跳页”问题，为简历、报告等双栏 PDF 输出提供可靠基础。
