mPDF 库和浮动图像答案

【问题标题】：mPDF library and float imagemPDF 库和浮动图像
【发布时间】：2011-12-23 05:58:08
【问题描述】：

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

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

html很简单：

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

【问题讨论】：

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

标签： pdf css-float image mpdf

【解决方案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 ));

    });

【讨论】：