PHP mPDF中div无法并排显示的问题咨询

我希望在生成的PDF中每行显示两个div，为此编写了如下代码：

$mpdf->WriteHTML('<div style="height:auto; display:grid; grid-template-columns: auto auto;">');

foreach($images as $image){

    $mpdf->WriteHTML('<div><img src="../'.$image.'" height="300" style="margin:5px;"></div>');

}

$mpdf->WriteHTML('</div>');

但在生成的PDF文件中，div是上下堆叠的。该代码在HTML编辑器中可正常运行，请问这是mPDF库的问题吗？它是否不支持grid布局？

编辑1：我还尝试了以下解决方案：

$mpdf->WriteHTML('<div>');
$float = 0;
foreach($images as $image){
    if($float == 0){
        $float = 1;
        $mpdf->WriteHTML('<div style="float:left;"><img src="../'.$image.'" height="300"></div>');
    }
    else{
        $float = 0;
        $mpdf->WriteHTML('<div style="float:right;"><img src="../'.$image.'" height="300"></div>');
    }
}
$mpdf->WriteHTML('</div>');

结果仍然相同，div还是上下堆叠。

问题原因 #

1. Grid布局支持有限：mPDF对CSS Grid的支持不完善，尤其是较旧版本，大部分复杂Grid属性无法被正确解析渲染，这就是浏览器中正常但PDF里失效的核心原因。
2. Float方案的问题：你用的float写法在mPDF里失效，大概率是因为未设置容器宽度、未正确处理浮动清除，或者mPDF本身对浮动元素的排版逻辑和浏览器存在差异。

可行解决方案 #

方案1：使用HTML表格（最可靠） #

mPDF对HTML表格的支持非常完善，用表格实现每行两列是最稳定的方式：

// 初始化表格
$mpdf->WriteHTML('<table width="100%" border="0" cellpadding="5">');
$count = 0;
foreach($images as $image){
    if($count % 2 == 0){
        // 开启新行
        $mpdf->WriteHTML('<tr>');
    }
    // 添加图片单元格
    $mpdf->WriteHTML('<td align="center"><img src="../'.$image.'" height="300"></td>');
    if($count % 2 == 1){
        // 结束当前行
        $mpdf->WriteHTML('</tr>');
    }
    $count++;
}
// 处理最后一行只有一个元素的情况，补空单元格
if($count % 2 == 1){
    $mpdf->WriteHTML('<td></td></tr>');
}
// 关闭表格
$mpdf->WriteHTML('</table>');

方案2：使用inline-block（需注意版本兼容） #

如果不想用表格，可以尝试display: inline-block，给每个div设置固定宽度（预留空隙），同时确保容器宽度足够：

$mpdf->WriteHTML('<div style="width:100%;">');
foreach($images as $image){
    $mpdf->WriteHTML('<div style="display:inline-block; width:48%; margin:1%; vertical-align:top;"><img src="../'.$image.'" height="300" style="max-width:100%;"></div>');
}
$mpdf->WriteHTML('</div>');

注意：部分旧版本mPDF对inline-block的支持可能存在问题，建议测试后使用。

方案3：升级mPDF版本 #

如果坚持想用Grid或Float布局，可尝试升级到最新版mPDF，新版本对CSS的支持有所提升，可能已经修复了浮动排版问题或支持基础Grid属性。

内容的提问来源于stack exchange，提问作者user21515830