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

我尝试使用odt文件作为模板，因为它允许非程序员构建或编辑生成文档的布局。为了便于布局调整，可以使用框架（类似于div）。我的代码将所有帧转换为div并设置其position: fixed;（由于mPDF忽略页边距，因此无法使用绝对值）。每个框架的大小和位置分开设置，我将其复制到各自的div风格中。所有这一切都很好。用于在mPDF中定位嵌套div的CSS替代方案

这里是转换为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>

上述工作正常与nested2nested1旁边有一个浏览器，但在MPDF nested2下面nested1结束。我已经尝试过position,display和float的所有组合。还尝试调整父级和包装div的宽度。并尝试将父框架位置添加到嵌套框架发布并设置position: absolute;，但如果[INSERT_STR]被替换为多行文本，则后续行位于嵌套框架后面。

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

来源

2016-04-02 Krik

嗨位置绝对和浮动和显示内联不工作在mpdf使用表格来对齐项目彼此相邻。并使用相对位置并将其放在顶部：-30px等以获得所需的位置。

来源

2016-04-05 13:47:06

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

回答

相关问题