
如何在 mpdf 中实现两列并排布局(兼容 float 与响应式技巧):mpdf 不支持 css grid 布局,且 `writehtml()` 分多次调用会破坏盒模型计算;正确做法是预先拼接完整 html 字符串,配合 `float` + 显式 `width` + `clear` 实现稳定双列布局。
mPDF 是一个功能强大的 PHP PDF 生成库,但它对现代 CSS 的支持存在明显限制——CSS Grid、Flexbox、display: inline-block 等布局方式均不被支持。你遇到的 div 垂直堆叠而非水平并排的问题,根本原因正是 grid-template-columns 在 mPDF 中完全无效,且多次调用 WriteHTML() 会导致内部渲染上下文断裂,无法正确解析浮动或定位关系。
✅ 正确实践:一次性传入结构完整的 HTML 字符串,并采用 mPDF 兼容的浮动布局方案:
$images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg']; // 示例图片数组
$html = '';
foreach ($images as $index => $image) {
// 每项宽度设为 45%(预留间距),奇偶交替左右浮动
$float = ($index % 2 === 0) ? 'left' : 'right';
$html .= '';
$html .= '@@##@@';
$html .= '';
// 每两个元素后插入清除浮动的 div(确保下一行从左开始)
if ($index > 0 && $index % 2 === 1) {
$html .= '';
}
}
// 关键:仅调用一次 WriteHTML,传入完整 HTML
$mpdf->WriteHTML($html);
$mpdf->Output();? 关键要点说明:
- 禁止分段调用 WriteHTML():mPDF 在每次调用时独立解析 HTML 片段,丢失父容器上下文(如 grid 容器或浮动根元素),导致样式失效;
- width :即使设 float:left,若子元素总宽 ≥100%,浏览器(及 mPDF)仍会换行;建议使用 45% + margin 或 calc(50% - 10px);
- 必须显式 clear: both:避免浮动塌陷,并控制每行元素数量(如双列则每 2 个后清空);
- 安全增强:使用 htmlspecialchars() 转义图片路径,防止 XSS 或路径注入;
- 图片自适应:添加 max-width: 100%; height: auto 避免横向溢出页面。
? 进阶提示:若需更灵活的列数(如三列),可将 45% 改为 30%,$index % 2 改为 $index % 3,并在 % 3 === 2 时插入 clear。对于复杂布局,推荐改用表格模拟(










