用於在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替代方案

回答

相關問題