dompdf Überlappung der Bilder

Question

Ich versuche, eine Produktgalerie Bilder in PDF zu konvertieren dompdf verwenden, aber es Überschneidungen Bilder, anstatt sie auf nächste Zeile zeigt (für die Lösung, habe ich versucht, <br> auch, aber nicht für mich arbeiten)

if(isset($data) && count($data)>0){ 
$html="<link rel='stylesheet' href='".get_template_directory_uri()."/assets/css/woocommerce.css'>"; 
$html.="<link rel='stylesheet' href='".get_template_directory_uri()."/style.css'>"; 
$html.="<div style='text-align: center;'><h1>".$project_title."</h1><span><h3>".$project_sub_title."</h3></span></div>"; 
$html.='<div id="pdf_main"><ul class="products clearfix products-3 pdf_class">'; 
$counter=1; 
while ($data = mysql_fetch_assoc($result)) { 
$html.='<li class=" product type-product status-publish has-post-thumbnail product_cat-bedroom instock shipping-taxable purchasable product-type-simple"> 
<img src="'.$data['img'].'" class="attachment-shop_catalog size-shop_catalog"> 
</a> 
<div class="product-details"> 
    <div class="product-details-container"> 
    <h3 class="" data-fontsize="16" data-lineheight="24">'.$data['product_title'].'</h3> 
</div> 
</div> 
</li>'; 
} 
$html.="</ul></div>"; 
$options = new Options(); 
$options->set('isRemoteEnabled', true); 
$dompdf = new Dompdf($options); 
$dompdf->loadHtml($html); 
$dompdf->setPaper('A4', 'portrait'); 
$dompdf->render(); 
$dompdf->stream('Products.pdf'); 
$output = $dompdf->output(); 
} 

Hier css

.products li.product { background-color: transparent; } 
.products-3 > li:nth-child(3n+1) { clear: both; content: " "; display: block;} 
.products li { border-color: #ebeaea;} 
.products-3 > li { float: left; margin-bottom: 11px; margin-right: 1%; width: 32.6%;} 
.products > li { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #efefef; border-image: none; border-style: solid; border-width: 1px 1px 2px;} 
.product { position: relative;} 

4. Siehe Bild i s die Hälfte reduziert und auch der 5. zeigt nicht, in meinem css i Schwimmer nach dem 3. Produkte am Clearing aber seine nicht funktioniert und über die Bilder

Answer 1

Läppen Nach viel Synchronisation ich weiß, kam, dass <li> wurde immer Auto mit deshalb war es überlappen. Ich gab es eine feste Breite und es funktionierte und zeigt perfekte Gitter

$html.='<li class=" product type-product status-publish has-post-thumbnail product_cat-bedroom instock shipping-taxable purchasable product-type-simple"> 
<img src="'.$data['img'].'" class="attachment-shop_catalog size-shop_catalog"> 
</a> 
<div class="product-details"> 
    <div class="product-details-container"> 
    <h3 class="" data-fontsize="16" data-lineheight="24">'.$data['product_title'].'</h3> 
</div> 
</div> 
</li>';