如何在 mpdf 中实现 div 并排布局（两列网格效果）：mpdf 不支持 css grid 布局，且对 `float` 的解析依赖完整 html 结构和显式宽度控制；正确做法是预先拼接完整 html 字符串，为浮动元素设置小于 50% 的宽度并适时清除浮动。
mPDF 是一个功能强大的 PHP PDF 生成库，但其 HTML/CSS 渲染引擎基于较早期的 CSS 2.1 规范，不支持现代布局特性（如 display: grid、flexbox 或 display: inline-block 的复杂换行逻辑）。这也是为什么你在浏览器中能正常显示 grid-template-columns: auto auto，但在 mPDF 输出中 div 却垂直堆叠——该样式被直接忽略，回退为默认块级流式布局。
要实现在 PDF 中每行显示两个图片容器（即两列布局），推荐使用 CSS float + 显式宽度 + clear 控制 的兼容方案，但必须注意三个关键点：
- 必须一次性传入完整 HTML 字符串：$mpdf->WriteHTML() 每次调用都会独立解析和渲染，若分多次写入（如循环中逐个 WriteHTML），mPDF 无法建立父子/兄弟元素间的布局上下文，导致浮动失效；
- 浮动元素需明确宽度：例如设为 width: 45%（留出间距余量），避免因默认 width: 100% 或内容撑开导致换行；
- 及时清除浮动：每两个元素后插入 <div style="clear: both;"></div>，防止后续内容错位。
✅ 正确示例代码如下：
$images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg']; // 替换为你的实际路径
$html = '';
foreach ($images as $index => $image) {
// 左右交替浮动，宽度设为 45% 确保两列不换行
$floatSide = ($index % 2 === 0) ? 'left' : 'right';
$html .= '<div style="width: 45%; float: ' . $floatSide . '; margin: 5px;">'
. '<img src="../' . htmlspecialchars($image) . '" height="300" alt="Image">'
. '</div>';
// 每两个元素后清除浮动（即每行结束时）
if ($index > 0 && $index % 2 === 1) {
$html .= '<div style="clear: both;"></div>';
}
}
// 若图片总数为奇数，末尾补一个 clear 防止后续内容偏移
if (count($images) % 2 === 1) {
$html .= '<div style="clear: both;"></div>';
}
$mpdf->WriteHTML($html);
$mpdf->Output();⚠️ 注意事项：
- 使用 htmlspecialchars() 转义图片路径，防止 XSS 或 HTML 解析错误；
- 图片路径应为服务器可访问的绝对路径或相对于 mPDF 工作目录的有效路径（../ 可能失效，建议用 __DIR__ . '/images/...' 或配置 base_path）；
- 如需更稳定布局，可将每对 div 封装进一个外层容器（如 <div style="overflow:hidden;">...<div style="clear:both;"></div></div>），增强隔离性；
- mPDF v8.0+ 对部分 Flex 属性有实验性支持，但仍不推荐用于生产环境中的关键布局——float + clear 仍是目前最可靠、兼容性最好的两列方案。
总结：放弃 Grid/Flex 思维，回归语义清晰、宽度可控、清除明确的 float 布局，并始终以单次 WriteHTML() 提交完整结构，即可在 mPDF 中稳定实现多列图片并排效果。
