Question

我能够在网页上并排保留两个元素，但不能在mPDF生成的PDF中并排保留两个元素。第一个元素是'div'元素，第二个元素是image。我尝试通过设置“显示”属性。但是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>

Answer 4

这将非常适合您，因为我使用的是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>

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

4 个答案: