mPDF 库和浮动图像

Posted 2023-05-07

【中文标题】mPDF 库和浮动图像

【英文标题】：mPDF library and float image

【发布时间】：2011-12-23 05:58:08

【问题描述】：

我尝试创建一个 pdf（使用 mPDF），但我遇到了问题。

看http://irk-studio.ru/files/763.pdf

问题是浮动图像和文本。它看起来像两列页面，但对我来说并不好。

html很简单：

<div class="text">Some article text</div>
<div style="float:right">
 <img src="..." />
 <img src="..." />
</div>

【问题讨论】：

请在页面上添加修复大小，以便 flot css 可以工作。

【参考方案1】：

浮动 div 在 mPDF 中可以正常工作。你需要声明div的宽度

见 here

【讨论】：

链接失效

【参考方案2】：

根据MPDF's manual

All Block level tags:
P, DIV, H1-H6, BLOCKQUOTE, ADDRESS, DL (contd.)

float   left|right

Partially supported as for CSS2 property.
NB Fixed-position or floating elements nested inside other fixed-position or floating elements are not supported.

从 5.4 开始不完全支持浮动。这里有一个如何在 mPDF 中做两列的例子：http://mpdf1.com/manual/index.php?tid=246

【参考方案3】：

我的解决方案

每个浮动 div 都有类（.fl 或 .fr）

.fl  float:left; 
.fr  float:right; 

    $(".fl").each(function(e)
    
        $(this).css('width',$(this).outerWidth( true ));

    );
   $(".fr").each(function(e)
    
        $(this).css('width',$(this).outerWidth( true ));

    );