如何在 PDF 中正确定位图像旁边的文本？答案

【问题标题】：How to position the text next to images properly in PDF?如何在 PDF 中正确定位图像旁边的文本？
【发布时间】：2013-03-22 06:10:24
【问题描述】：

我正在使用 PHP、Smarty 和 TCPDF 库来生成文档的 PDF 副本。该文档包含来自 WIRIS 编辑器的数学表达式图像以及文本内容。

我在正确定位表情图像旁边的文本时遇到问题。

我尝试了 CSS float 属性中的所有内容，但没有任何反应。我正在附上我想要的这封邮件的屏幕截图。

这是打印问题及其选项的 smarty 模板代码：

{foreach from=$question_data item=qstn_ans key=key}
    <table border="0" width="100%" cellpadding="2" cellspacing="0">
        <tr>
            <td valign="top" >{if $qstn_ans.question_directions}{$qstn_ans.question_directions}<br /><b>Question {$que_seq_no} : </b>{/if}{$qstn_ans.question_text}</td>
        </tr>
        {if $qstn_ans.question_file}
        <tr>
            <td><img src="{$ques_thum_image_path}{$qstn_ans.question_id}_{$qstn_ans.question_file}" /></td>
        </tr>
        {/if}
        {if $qstn_ans.question_has_sub_ques==0}
            {if $qstn_ans.answer}
                {foreach from=$qstn_ans.answer item=ans key=ans_no}
                    <td valign="top" >
                        {if $ans.answer_is_right==1}{assign var='correct_ans' value=$ans_no+1}{/if}
                            <b>{$ans_no+1}.</b>&nbsp;&nbsp;{if $ans.answer_text!=''}{$ans.answer_text}{/if}
                            {if $ans.answer_file!=''}<img src="{$ans_thumb_img_path}{$ans.answer_id}_{$ans.answer_file}" />{/if}
                     </td>
                </tr>
                {/foreach}
        <tr>
            <td></td>
        </tr>
    </table>
{/foreach}

这段代码 sn-p 可能包含一些错误，因为我随机粘贴它而没有检查循环和括号是否完成，但这不是这里的问题。

此代码中唯一重要的部分是打印问题文本和问题图像（如果存在）的行。

我研究了正确的解决方案，但找不到想要的解决方案。谁能帮我吗。

Screenshot

【问题讨论】：

标签： php css image smarty tcpdf

【解决方案1】：

发现这段代码工作正常

$html = <<<EOD
<h1><img src="http://www.google.com/logos/2013/wangari_maathai_73rd_birthday-1400005-hp.jpg" height="50px" width="150px"> Welcome to <a href="http://www.tcpdf.org" style="text-decoration:none;background-color:#CC0000;color:black;">&nbsp;<span style="color:black;">TC</span><span style="color:white;">PDF</span>&nbsp;</a>!</h1>
<i>This is the first example of TCPDF library.</i>
<p>This text <img src="http://www.google.com/logos/2013/wangari_maathai_73rd_birthday-1400005-hp.jpg" height="50px" width="150px"> <br>is printed using the <i>writeHTMLCell()</i> method but you can also use: <i>Multicell(), writeHTML(), Write(), Cell() and Text()</i>.</p>
<p>Please check the source code documentation and other examples for further information.</p>
<p style="color:#CC0000;">TO IMPROVE AND EXPAND TCPDF I NEED YOUR SUPPORT, PLEASE <a href="http://sourceforge.net/donate/index.php?group_id=128076">MAKE A DONATION!</a></p>
EOD;

// Print text using writeHTMLCell()
$pdf->writeHTMLCell($w=0, $h=0, $x='', $y='', $html, $border=0, $ln=1, $fill=0, $reseth=true, $align='', $autopadding=true);

【讨论】：

【解决方案2】：

似乎所有不对齐的信息都来自$qstn_ans.question_text，所以上面的代码没有问题。

我建议将该问题文本中的每个“陈述”保存在单独的段落中。例如

<p>Statement I: The variance of first n even natural numbers is <img src="?" /></p>
<p>Statement II: The sum of first n natural numbers is <img src="?" /></p>
<p>and the sum of squares of first n natural numbers is <img src="?" /></p>

这应该会导致问题文本的每一“行”单独显示而不会相互碰撞。

【讨论】：

【解决方案3】：

我同意 Nerdwood 的观点，这看起来不像是 Smarty 问题；我认为这只是一个CSS问题。 img 向下延伸到足以捕捉下一行文本的左边缘。您需要将文本向下撞，以便它可以向左移动。您可以在 img 上放置一个 CSS 属性，例如 clear: right;

我认为应该这样做。

【讨论】：

如果这不起作用，您可以尝试 clearfix hack -- img:after{...} 等

【解决方案4】：

TCPPDF 的 HTML 并不完美，因此您应该在每个 <td> 中使用 width 属性：

...
<tr>
    <td valign="top" width="250" >
        {if $qstn_ans.question_directions}{$qstn_ans.question_directions}<br /><b>Question {$que_seq_no} : </b>{/if}{$qstn_ans.question_text}
    </td>
</tr>
    {if $qstn_ans.question_file}
<tr>
    <td width="100">
        <img src="{$ques_thum_image_path}{$qstn_ans.question_id}_{$qstn_ans.question_file}" />
    </td>
</tr>
    {/if}
...

【讨论】：

【解决方案5】：

尝试使用<br> 代码来解决您的问题

【讨论】：