Question

我正在使用旧的itext创建pdf，并且正在使用HTMLWorker创建pdf段落，但无法使用CSS。

我尝试使用float，但我也不能。

我需要一个带有正确文本的图像，并带有更少的html代码。

现在我有这个

<html>
    <body>
        <img src='http://losmercadosfinancieros.es/wp-content/uploads/world-globe1.jpg' width='100' height='100'>
        <h1 style='color: green;'>Heading in Green</h1>
        <div style='color: red;'>Sample text in red color.</div>
    </body>
</html>

文字应该是正确的图片

Answer 1

如何使用图像的老式align属性？

    <img src='http://losmercadosfinancieros.es/wp-content/uploads/world-globe1.jpg' width='100' height='100' align="left">
    <h1 style='color: green;'>Heading in Green</h1>
    <div style='color: red;'>Sample text in red color.</div>

Answer 2

希望这是根据您的要求... 我在在线编辑器中尝试过它对我来说很好。如果不是按照要求请务必提出要求。清楚地。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <style>
        img {
        float:left;
        }
        </style>
    </head>
    <body>
        <html>
            <body>
                <div>
                    <img src='http://losmercadosfinancieros.es/wp-content/uploads/world-globe1.jpg' width='100' height='100'>
                </div>
                <div>
                    <h1 style='color: green;'>Heading in Green</h1>
                </div>
                <div style='color: red;'>Sample text in red color.</div>
            </body>
        </html>
    </body>
</html>

Answer 3

table 不适合用于网站布局，但我认为像您的情况一样，它对PDF很有帮助。

<table width="800" border="0">
  <tr>
    <td width="120">
      <img src="//losmercadosfinancieros.es/wp-content/uploads/world-globe1.jpg" width="100" height="100">
    </td>
    <td width="680" valign="top">
      <h1 style="color: green;">Heading in Green</h1>
      <div style="color: red;">Sample text in red color.</div>
    </td>
  </tr>
</table>

Answer 4

<img src='http://losmercadosfinancieros.es/wp-content/uploads/world-globe1.jpg' 
     width='100' 
     height='100' 
     style="float:right">

不使用CSS的右侧文字图片

4 个答案: