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一样。

以下是嵌套在转换为HTML的另一帧中的2帧的示例：

<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>

以上nested2旁边的nested1浏览器可以正常使用，但mPDF nested2最终会低于nested1。我尝试过position，display和float的所有组合。还尝试调整父级和包装器div的宽度。并尝试将父框架位置添加到嵌套框架发布并设置position: absolute;，但如果[INSERT_STR]被多行文本替换，则后续行位于嵌套框架后面。

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

Answer 1

位置绝对和浮动并且显示内联在mpdf使用表中不起作用以使项目彼此相邻。并使用位置相对并给它顶部：-30px等以获得所需的位置。

用于在mPDF中定位嵌套div的CSS替代方法

1 个答案: