顶部，左侧定位在mPDF中不起作用

Question

我想使用css设置内容元素的位置，但是它不起作用。 甚至mPDF也支持此功能。 我有想念吗？ 我试图使用float-left，margin-left和top对齐，但是它只能定位元素之一->不够好

mPDF：

$content = ' <div id="id_3" ondrop="drop(event)" ondragover="allowDrop(event)"
class="relative" style="position:relative;"> 
<img src="../temp/test.png" height="100" width="100" class="draggable ui-widget-content" id="qr"/>
 <label class="draggable ui-widget-content clickableLabel" class="field_name" >Name: [Person Name]</label>
    <label class="draggable ui-widget-content clickableLabel" class="field_id" >ID: [Person ID]</label>

</div>';


$style = '#id_3 #qr{ position:absolute; top:10px; left:30px; }
         #id_3 #field_name{ position:absolute; top:26px; left:168.8125px; } 
         #id_3 #field_id{ position:absolute; top:63px; left:186.65625px; } ;'



 $pdf = new Pdf([

           // set to use core fonts only
           'mode' => Pdf::MODE_CORE,
           // A4 paper format
           'format' => Pdf::FORMAT_A4,
           // portrait orientation
           'orientation' => Pdf::ORIENT_PORTRAIT,
           // stream to browser inline
           'destination' => Pdf::DEST_BROWSER,
           // your html content input
           'content' => $content,
           // format content from your own css file if needed or use the
           // enhanced bootstrap css built by Krajee for mPDF formatting
           'cssFile' => '@vendor/kartik-v/yii2-mpdf/assets/kv-mpdf-bootstrap.min.css',
           // any css to be embedded if required
           'cssInline' => $style,
           //$style,//'.kv-heading-1{font-size:18mm}'
           // set mPDF properties on the fly
           'options' => ['title' => 'ID Card'],
           // call mPDF methods on the fly
           'methods' => [
              // 'SetHeader'=>['Krajee Report Header'],
              // 'SetFooter'=>['{PAGENO}'],
           ],
           'marginTop' => 2,//1
           'marginBottom' => 1,
           'marginLeft' => 2,
           'marginRight' => 0,

        ]);

Answer 1

您的原始代码：

$content = ' <div id="id_3" ondrop="drop(event)" ondragover="allowDrop(event)"
class="relative" style="position:relative;"> 
Here as you didnt closed text tags, $style was ignored
$style = #id_3 #qr{ position:absolute; top:10px; left:30px; }
     #id_3 #field_name{ position:absolute; top:26px; left:168.8125px; } 
     #id_3 #field_id{ position:absolute; top:63px; left:186.65625px; } 

<img src="../temp/test.png" height="100" width="100" class="draggable ui-widget-content" id="qr"/>
<label class="draggable ui-widget-content clickableLabel" class="field_name" >Name: [Person Name]</label>
<label class="draggable ui-widget-content clickableLabel" class="field_id" >ID: [Person ID]</label>

</div>';

问题出在关闭文本标签的位置

我的更正：

$content = ' <div id="id_3" ondrop="drop(event)"  ondragover="allowDrop(event)"
class="relative" style="position:relative;"> ';

$style = '#id_3 #qr{ position:absolute; top:10px; left:30px; }
     #id_3 #field_name{ position:absolute; top:26px; left:168.8125px; } 
     #id_3 #field_id{ position:absolute; top:63px; left:186.65625px; }

<img src="../temp/test.png" height="100" width="100" class="draggable ui-widget-content" id="qr"/>
<label class="draggable ui-widget-content clickableLabel" class="field_name" >Name: [Person Name]</label>
<label class="draggable ui-widget-content clickableLabel" class="field_id" >ID: [Person ID]</label>

</div>';

mPDF忽略php标签