dompdf chevauche les images

Question

Je suis en train de convertir une galerie d'images de produits en PDF à l'aide dompdf, mais il chevauche des images au lieu de les montrer sur la ligne suivante (pour la solution, j'ai essayé <br> aussi, mais ne fonctionne pas pour moi)

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(); 
} 

Voici 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;} 

Voir 4ème image i s moitié coupé et aussi 5 n'apparaît pas, dans mon css je suis compensation flottant après le 3 produits, mais sa ne fonctionne pas et clapotis sur les images

Answer 1

Après beaucoup de doublage je suis venu pour savoir que <li> devenais auto avec c'est pourquoi il était plus de rodage. Je lui ai donné une largeur fixe et il fonctionnait et montrant la grille parfaite

$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>';