0

0

如何在 mPDF 中实现两列并排布局(兼容 float 与响应式技巧)

碧海醫心

碧海醫心

发布时间:2026-02-01 17:31:19

|

920人浏览过

|

来源于php中文网

原创

如何在 mPDF 中实现两列并排布局(兼容 float 与响应式技巧)

如何在 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();

? 关键要点说明:

Melodrive
Melodrive

Melodrive -一个AI音乐引擎,根据用户的情绪状态和喜好生成个性化的音乐。

下载
  • 禁止分段调用 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。对于复杂布局,推荐改用表格模拟(

+ cellpadding),mPDF 对表格渲染最稳定可靠。如何在 mPDF 中实现两列并排布局(兼容 float 与响应式技巧)

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
css中float用法
css中float用法

css中float属性允许元素脱离文档流并沿其父元素边缘排列,用于创建并排列、对齐文本图像、浮动菜单边栏和重叠元素。想了解更多float的相关内容,可以阅读本专题下面的文章。

580

2024.04.28

C++中int、float和double的区别
C++中int、float和double的区别

本专题整合了c++中int和double的区别,阅读专题下面的文章了解更多详细内容。

103

2025.10.23

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

361

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1503

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

625

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

677

2024.03.22

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

630

2024.04.29

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

30

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 10.7万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 11.2万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号