Альтернатива CSS для размещения вложенных divs в mPDF

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; Также обратите внимание на всем встроенный стиле является обязательным, так как большинство из них встроенного в XML-ODT в. Квадратные скобки ([..]) текст заменяется позже.

Проблема возникает, когда у меня есть рамки внутри кадров. Поскольку текст может быть рядом с вложенными фреймами, у меня есть 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> 

выше прекрасно работает в браузере с nested2 рядом nested1, но в MPDF nested2 заканчивается ниже nested1. Я пробовал каждую комбинацию position, display и float. Также попытался настроить ширину родительских и оберточных div. И попытался добавить положение родительских кадров во вложенную фреймовую проводку и установить position: absolute;, но если [INSERT_STR] заменено несколькими строками текста, последующие строки находятся за вложенными кадрами.

Как любой программист знает, что всегда есть несколько способов сделать что-то, поэтому я ищу некоторые идеи о том, как разместить вложенные фреймы.

Answer 1

hi position absolute и float и display inline не работают в таблице использования mpdf для выравнивания объекта рядом друг с другом. и используйте позицию position и дайте ей верх: -30px и т. Д., Чтобы получить нужную позицию.