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

Question

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

代码结构是这样的：

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

<img src="some_url">

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

Answer 1

尝试这个对你有所帮助。

#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>

Answer 2

这对我有用。我添加了内联样式以直接在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>

Answer 3

尝试这个它对我有用它肯定会对你有所帮助。这个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>