首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >重叠图像

重叠图像
EN

Stack Overflow用户
提问于 2016-12-01 20:10:44
回答 2查看 2K关注 0票数 2

我试图使用dompdf将产品库图像转换为PDF格式,但它与图像重叠,而不是在下一行中显示(对于解决方案,我也尝试过<br>,但对我来说不起作用)

代码语言:javascript
复制
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();
}

这是css

代码语言:javascript
复制
.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;}

看第四张图片是半切的,第五张也没有显示,在我的css中,我正在清除第三种产品后的浮子,但是它不能工作,而且无法研磨这些图像。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-12-12 20:53:39

经过多次配音后,我逐渐意识到,<li>正在获得汽车,这就是为什么它是结束了研磨。我给它固定的宽度,它正在工作,显示出完美的网格。

代码语言:javascript
复制
$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>';
票数 0
EN

Stack Overflow用户

发布于 2021-12-10 11:32:19

迟答,但可能对domPDF中有重叠图像的人有用:

我遇到了图像与文本重叠的问题,最后发现问题在HTML中。domPDF在一些浏览器可以弥补的问题上苦苦挣扎。我们的身体里有一个流氓风格的标签,它似乎打破了告诉dompf图像高度的东西。

这个工具很适合调试:https://eclecticgeek.com/dompdf/debug.php

你可以粘贴你的HTML到它,并呈现为PDF播放设置等。这是突出我的问题。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40919523

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档