php - 用于在 mPDF 中定位嵌套 div 的 CSS 替代方案

Question

我正在尝试使用 odt 文件作为模板，因为它允许非程序员构建或编辑生成文档的布局。为了便于布局调整，可以使用框架(类似于 div)。我的代码将所有帧转换为 div 并设置它们的 position: fixed;(不能使用绝对值，因为 mPDF 会忽略页边距)。每个框架都有单独设置的大小和位置，我将其复制到各自的 div 样式中。一切正常。

这是一个转换为 HTML 的基本框架的示例:

<div class="frame" style="left: 0in; top: 0in; width: 2.0374in;  height: 0.5717in; z-index: 0;">
    <div style="margin-top: 0.0098in; font-family: Arial; font-size: 8pt; font-weight: bold;">
        Some Text [REPLACE_THIS]
    </div>
    <div style="margin-top: 0.0098in; font-family: Arial; font-size: 8pt;">
        More Text [CHANGE_THIS]
    </div>
</div>

注意:class="frame" 设置了 position: fixed; 还要注意所有内联样式是必须的，因为大部分内联样式都在 odt 的 XML 中.方括号 ([..]) 中的文本稍后会被替换。

当我在框架内有框架时，问题就来了。由于文本可能位于嵌套框架的一侧，我让我的 PHP 查找嵌套框架，如果它们存在，我将它们包装在另一个 div 中。我设置了包装器 div position: relative; 以便嵌套的框架保持在父框架的流中。但在 mPDF 中，这导致嵌套框架的行为就像它们被设置为 static 一样。

这是一个嵌套在另一个框架中的 2 个框架转换为 HTML 的示例:

<div class="frame" style="left: 5.8591in; top: 1.6209in; width: 2.1661in;  height: 1.3134in; z-index: 14;">
    <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;">
        Parent Frame Text [INSERT_STR]
    </div>
    <div id="nestedwrapper" style="position: relative; overflow: visible;">
        <div id="nested1" class="frame" style="position: absolute; left: 0.328in; top: 0in; width: 0.9217in;  height: ; z-index: 15;">
            <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;">
                First Value:
            </div>
            <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;">
                Second Value:
            </div>
        </div>
        <div id="nested2" class="frame" style="position: absolute; left: 1.378in; top: 0in; width: 0.7835in;  height: ; z-index: 16;">
            <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;">
                [FIRST_VALUE] 
            </div>
            <div style="margin-top: 0.0201in; text-align: right; font-family: Arial; font-size: 8pt;">
                [SECOND_VALUE] 
            </div>
        </div>
    </div>
</div>

上面的代码在 nested1 旁边带有 nested2 的浏览器中运行良好，但在 mPDF 中 nested2 结束于 nested1 >。我已经尝试了 position、display 和 float 的所有组合。还尝试调整父 div 和包装 div 的宽度。并尝试将父框架位置添加到嵌套框架发布并设置 position: absolute; 但如果 [INSERT_STR] 被替换为多行文本，则后续行落后嵌套框架。

任何程序员都知道做某事总是有不止一种方法，所以我正在寻找一些关于如何定位嵌套框架的奇思妙想。

Answer 1

hi position absolute 和 float and display inline 在 mpdf 中不起作用，使用表格将元素彼此相邻对齐。并使用 position relative 并给它 top:-30px 等以获得所需的位置。