PDF 中的 DomPDF 布局中断

Question

我在 PHP 中使用 DOMPDF 来生成 PDF 文件。布局看起来很完美。但仅当有页面更改时。布局打破了右侧 div 到左侧的一些移动内容。 我猜 dompdf 逐行读取内容，并在左侧的新页面中获得一个空白空间，从而将右侧部分移到左侧。有帮助解决这个问题吗？ 这是我的 DOMPDF 代码

$blockHTML = "";
$blockHTML .= 
'<div style="color:rgb(23, 23, 78);font-family:proximanova;letter-spacing:1px;font-size:12px;">
    <div style="padding-bottom:10px;border-bottom:'.$border.'"><!--header-->
        <img src="'.$logoImg.'" width="65">
    </div>
    <div style="margin-top:10px;">
        <div style="text-align:center;padding:10px;border-bottom:'.
            $border.'font-weight:bold;font-size:1.4em;">
            <span>"Favorite Italian Restaurants in Los Angeles"</span>
        </div>
    </div>
    <div style="margin-top:5px;">
        <div style="text-align:center;padding:10px;">
            <span style="color:rgb(179,179,179);">Collection Created By: </span>
            <span>&nbsp;Vivek Tankaria</span>
        </div>
    </div>
    <div style="margin-top:5px;">
        <div style="text-align:center;display:inline-block;width:200px;margin:0 auto;">
            <img src="'.$poiMarker.'" width="12" />
            <span style="padding:0px 10px;height:15px;line-height:15px;">
                48 Locations Bookmarked
                </span>
        </div>
    </div>';
for($i=0;$i<20;$i++){
    $blockHTML .= '<div style="margin-top:10px;border-top:'.$border.'">
        <div style="width:100%;padding:10px 2.5%;">
            <div style="display:inline-block;width:25%;">
                <div>
                    <img src="'.$data.'" style="width:100%;height:auto;" />
                </div>
            </div>
            <div style="display:inline-block;width:46%;padding:0 2%;">
                <div style="width:100%;">
                    <span style="padding:2px 0;border-bottom:'.
                        $border.';font-weight:bold;width:70%;display:inline-block;">
                        Venue Name Comes Here
                    </span>
                    <span>
                        <img style="padding:2px;" src="'.$star.'" width="12" />
                        <img style="padding:2px;" src="'.$star.'" width="12" />
                        <img style="padding:2px;" src="'.$star.'" width="12" />
                        <img style="padding:2px;" src="'.$star.'" width="12" />
                        <img style="padding:2px;" src="'.$star.'" width="12" />
                    </span>
                </div>
                <div style="width:100%;">
                    <span style="padding:5px 0;width:70%;display:inline-block;">
                        <i>"Venue Caption Comes Here"</i>
                    </span>
                    <span style="padding:5px 0;display:inline-block;text-align:right;font-size:1.2em;width:28%;">
                        $$$
                    </span>
                </div>
                <div style="width:100%;">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type
                </div>
            </div>
            <div style="display:inline-block;width:25%;">
                <div>
                    <img src="'.$data.'" style="width:100%;height:auto;" />
                </div>
            </div>
        </div>
        <div style="width:100%;padding:10px 2.5%;">
            <div style="display:inline-block;width:22%;">
                <span style="display:inline-block;width:10%;padding:0 2%;"><img src="'.$call.'" width="15" /></span>
                <span style="display:inline-block;width:90%;">(123) 456-7890</span>
            </div>
            <div style="width:1%;height:20px;display:inline-block;border-right:'.$border.'"></div>
            <div style="display:inline-block;width:18%;padding:0 4% 0 2%;">
                <span style="display:inline-block;width:10%;padding:2px 6%;"><img src="'.$website.'" width="18" /></span>
                <span style="display:inline-block;width:90%;">www.uvwxyz.com</span>
            </div>
            <div style="width:1%;height:20px;display:inline-block;border-right:'.$border.'"></div>
            <div style="display:inline-block;width:18%;padding:0 2%;">
                <span style="display:inline-block;width:10%;padding:2px 6%;"><img src="'.$email.'" width="18" /></span>
                <span style="padding:0 2%;display:inline-block;">useremail @uvwxyz.com</span>
            </div>
            <div style="width:1%;height:20px;display:inline-block;border-right:'.$border.'"></div>
            <div style="display:inline-block;width:22%;padding:0 2%;">
                <span style="display:inline-block;width:10%;padding:0 2%;"><img src="'.$address.'" width="12" /></span>
                <span style="display:inline-block;width:90%;">123, Street One, Road Rd, Location (w), City - 123456</span>
            </div>
        </div>
       </div>';
}
$blockHTML .= '</div>';

$this->load->library('dompdf_gen');
// Convert to PDF
$this->dompdf->set_paper("A4");
$this->dompdf->load_html($blockHTML);
$this->dompdf->render();
$this->dompdf->stream("welcome.pdf",array("Attachment"=>0));

附上图片供参考

Answer 1

当移动到新页面时，dompdf 在确定布局时基本上是从头开始的。由于这是相对少量的内容，您可以尝试使用 page-break-inside: avoid; 对其进行样式设置，以防止单独破坏这些元素。