如何使用 mPDF 库在 PDF 中并排保存两个元素？答案

【问题标题】：How to keep two elements side by side in PDF with mPDF library?如何使用 mPDF 库在 PDF 中并排保存两个元素？
【发布时间】：2019-03-09 19:10:10
【问题描述】：

我可以在网页上并排保留两个元素，但不能在使用 mPDF 生成的 PDF 中。第一个元素是“div”元素，第二个元素是图像。我尝试通过设置“显示”属性。但是 mPDF 对内联块元素有一些限制。感谢您的帮助。谢谢。

代码结构如下：

<div>
   <h4><span>Some Text</span></h4>
   <span>Some other text</span>
</div>

<img src="some_url">

PDF 是通过 mPDF 的“WriteHTML”函数调用生成的。我将整个 HTML 传递给此函数以将 HTML 写入文档。

【问题讨论】：

标签： php css html pdf mpdf

【解决方案1】：

这对我有用。我添加了内联样式以直接在 PDF 中应用它们。

<div style="width: 100%;">
  <div align="left" style="width: 50%;float: left;">
    <h4><span>Some Text</span></h4>
    <span>Some other text</span>
  </div>

  <div align="left" style="width: 50%;float: left;">
    <img src="https://via.placeholder.com/350x150" style="max-width:150px;height:auto"/>
   </div>
</div>

【讨论】：

【解决方案2】：

试试这个它肯定对我有用，它对你有帮助。这个 div 有两个 div 一个 div 保留背景图片另一个有文字试试这个。

 <div style="width:666px; height:450px;position:fixed;margin:0;padding:0;">
<div style="width:332px;margin:0;padding:0;height:100%;float:left;background-position: center;background-repeat: no-repeat;background-image:url(https://via.placeholder.com/350x150);background-size:100px 100px;overflow:auto;background-origin:content-box;position:relative;">
first div</div>
<div style="width:50%;margin:0;padding:0;height:100%;">second div</div>
</div>

【讨论】：

【解决方案3】：

这对你来说是完美的，因为我使用的是 mpdf 这就是为什么......

.col6 {width:50%;float:left;}
.col12 {width:100%;float:left;}

<div class="col12">
    <div class="col6">  
        <h4>Some Text</h4>
        <div>Some other text</div>
    </div>
    <div class="col6">
        <img src="https://via.placeholder.com/350x150" />
    </div>
</div>

【讨论】：

【解决方案4】：

试试这个对你有帮助。

#inline{width:100%;height:auto;background-color:black;display:flex;}
	.one,.two{width:50%;height:auto;background-color:green;margin:10px;}
  .two img{width:100%;}

<div id="inline">
	<div class="one">	
		<h4><span>Some Text</span></h4>
	   	<span>Some other text</span>
	</div>
	<div class="two">
		<img src="https://via.placeholder.com/350x150" />
	</div>
</div>

【讨论】：

谢谢@Vijay。但是，它适用于网页（HTML）页面（已经在页面上工作），但不适用于 PDF。仍然“.two”元素进入新行。顺便说一句，我可以通过使用一些 CSS 属性（如“width”和“float”以及“align”属性）来解决我的问题。供参考，mpdf.github.io/what-else-can-i-do/floating-blocks.html
欢迎@suyogb 检查下面的链接，我想它会对你有所帮助。 stackoverflow.com/questions/30258066/… 谢谢。
mPdf 不支持 flexbox