Разбиение макета DomPDF в PDF

Question

Я использовал DOMPDF в PHP для создания 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;, чтобы предотвратить разлом этих элементов независимо.