DomPDF 中的整页 3 列布局

Question

我正在使用 dompdf 生成这样的 pdf：

public function generatePdf($customerId){
    // instantiate and use the dompdf class
    $dompdf = new Dompdf();
    $options = new Options();
    $options->setIsRemoteEnabled(true);

    $dompdf->setOptions($options);
    $dompdf->loadHtml($this->renderHtml());

    // (Optional) Setup the paper size and orientation
    $dompdf->setPaper('A4', 'potrait');

    // Render the HTML as PDF
    $dompdf->render();
    // Output the generated PDF to Browser
    $dompdf->stream();
}

$this->renderHtml() 将返回包含 html 文本的字符串，如下所示：

       <style>
        .first-page .bottom{
          display:inline;
          width:100%;
        }
        .first-page .bottom .section{
          display: block;
          width:25%;
          height: 30px;
        }
        .first-page .bottom .left.section{
        }
        .first-page .bottom .right.section{
          width:37%;
          margin-right:0;
        }
      </style>
      <div class = "first-page">
        <div class = "bottom">
           <div class="left section">
              <p class="title">How to activate Card</p>
              <p class="main">
                <ol>
                   <li>Open Purse Pay</li>
                   <li>Lo-in to V-Card feature</li>
                   <li>Input your V-Card number.</li>
                </ol>
              </p>
           </div>
           <div class="middle section">
              <p class="title">How to use V-Card</p>
              <p class="main">
                <ol>
                   <li>Find merchant who accept V-Card payment</li>
                   <li>Stick QR-Code to Merchant Machine ‘<i>White Box</i>’ Purse Pay.</li>
                   <li>Check your transaction and credit amount from Purse Pay APP.</li>
                </ol>
              </p>
           </div>
           <div class="right section">
              <p class="title">Tips to use V-card safely</p>
              <p class="main">
                <ol>
                   <li>If you lost yout card, block your card immediately from Purse Pay App or you can contact our Customer Support <span class="bold">150 555</span>.</li>
                   <li>Keep your pin secret</li>
                   <li>Always update if you have changes on your data (Phone number, e-mail, shipping address, profile picture, etc)</li>
                   <li>If you do not use your card anymore, please shred or cut your V-Card into pieces using magenetic shredder.</li>
                   <li>Jika kartu sudah tidak lagi digunakan, harap untuk menggunting kartu V-card dengan gunting magnetik.</li>
                </ol>
              </p>
           </div>
        </div>
      </div>

pdf 中的结果如下所示，div 重叠，所有内容都向左对齐：

我希望结果有 3 列像这样均匀分布：

我怎样才能做到这一点？

Answer 1

在这里，您需要测试您的 CSS，它缺少很多东西才能使其正常工作。 见下面的代码： https://jsfiddle.net/0L25vxo8/2/

.first-page .bottom{
  display:inline;
  width:100%;
}
.first-page .bottom .section{
  display: block;
  width:32%; /* And a width for all section */
  float: left; /* Adding a floating attribute */
  height: 30px;
}
.first-page .bottom .left.section{

}
.first-page .bottom .right.section{
  width:33%; /* Overide width */
}
.first-page .bottom .middle.section{

}

Answer 2

您可以使用弹性网格来做到这一点。

div.bottom{
    display:flex;
    flex-direction:row;
}

div.section {
     flex:1
}

这样每个部分都将具有相同的宽度，大约为 33%。试试这个删除所有以前的样式设置。希望对您有所帮助。