Как разбить mPDF на 4 равных прямоугольника с картинкой и текстом внутри? - PullRequest
Новая
       41

Как разбить mPDF на 4 равных прямоугольника с картинкой и текстом внутри?

0 голосов
/ 24 февраля 2020

Я использую расширение https://github.com/kartik-v/yii2-mpdf Невозможно разделить страницу на 4 равных прямоугольника с содержимым внутри (текст + рисунок). Я пытался использовать таблицу со свойствами стиля "table-layout: fixed", и трудно установить ширину и высоту тега td не помогло ... Просто эти параметры не применяются.

UPD : Пошли создавать с нуля. Пока есть такой html, все прекрасно: 

<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;width: 793px; height: 1122px;">
  <table style="width:100%;table-layout: fixed">
    <tr>
      <td width="396px" height="500px"
          style="border-right:1px dashed black;border-bottom:1px dashed black;vertical-align:center;">
        <table style="width:100%;">
          <tr>
            <td>
              <p style="color:#009acf;font-size:27px;font-weight:bold;">sadsaa</p>
              <hr style="width:100%;color:#d6d6d6;"/>
              <hr style="width:100%;color:#d6d6d6;"/>
            </td>
          </tr>
        </table>

      </td>
      <td width="396px" height="561px"
          style="vertical-align:center;border-bottom:1px dashed black;">
        N2
      </td>
    </tr>
    <tr>
      <td width="396px" height="561px"
          style="border-right:1px dashed black;vertical-align:center;">
        N3
      </td>
      <td width="396px" height="561px"
          style="vertical-align:center;">
        N4
      </td>
    </tr>
  </table>
</div>

Когда вы добавляете в таблицу еще одну строку, правая область становится меньше указанного размера: 

<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;width: 793px; height: 1122px;">
  <table style="width:100%;table-layout: fixed">
    <tr>
      <td width="396px" height="500px"
          style="border-right:1px dashed black;border-bottom:1px dashed black;vertical-align:center;">
        <table style="width:100%;">
          <tr>
            <td>
              <p style="color:#009acf;font-size:27px;font-weight:bold;">sadsaa</p>
              <hr style="width:100%;color:#d6d6d6;"/>
              <hr style="width:100%;color:#d6d6d6;"/>
            </td>
          </tr>
        </table>

      </td>
      <td width="396px" height="561px"
          style="vertical-align:center;border-bottom:1px dashed black;">
        N2
      </td>
    </tr>

    <tr>
      <td width="396px" height="61px" style="vertical-align:bottom;border-bottom:1px dashed black;border-right:1px dashed black;">
        <hr style="width:100%;color:#d6d6d6;margin-top:0px;"/>
        <table style="width:100%">
          <tr>
            <td style="vertical-align:top;">
              <span style="text-align:right;font-size:20px;"><i>sada</i></span>
            </td>
            <td style="vertical-align:top;text-align:center;">
              <div style="font-size:20px;"><img alt="" src="https://i.ibb.co/nRNF09k/border-radius.png"/></div>
            </td>
            <td  style="vertical-align:top;">
              <span style="text-align:left;font-size:20px;"><i>asdsa</i></span>
            </td>
          </tr>
        </table>
      </td>
      <td width="396px" height="61px" style="vertical-align:bottom;text-align:center;border-bottom:1px dashed black;">
        <img src="https://i.ibb.co/nRNF09k/border-radius.png"/>
      </td>
    </tr>
    <tr>
      <td width="396px" height="561px"
          style="border-right:1px dashed black;vertical-align:center;">
        N3
      </td>
      <td width="396px" height="561px"
          style="vertical-align:center;">
        N4
      </td>
    </tr>
  </table>
</div>
...