Question

我想要显示图像，然后并排显示文本行。这样的图像位于左侧，2行文本位于其右侧。我想在thymaleaf做这个。请在下面找到我的代码： -

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:remove="all">Template for HTML email with inline image</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="(${name})"></p>
    <p th:text="(${subject})"></p>
    <table>
        <tr>
            <td><img src='cid:coupons' /></td>
            <tr>
            <td><h4>Login Url :</h4></td>
            <td>
                <h4 th:text="${loginurl}"></h4>
            </td>
        </tr>
        <tr>
            <td><h4>ID :</h4></td>
            <td>
                <h4 th:text="${id}"></h4>
            </td>
        </tr>
        </tr>
    </table>
    <p>
        Regards, <br /> <em>Admin</em>
    </p>
</body>
</html>

但这是先打印图像，然后打印下面的线条。任何人都可以帮助我如何解决这个问题。

Answer 1

如果我说得对，你可以尝试插入第二个td单元格内表：

<table>
  <tr>
    <td><img src='cid:coupons' /></td>
    <td><table>
      <tr>
        <td>
          <h4>Login Url :</h4>
        </td>
      </tr>
      <tr>
        <td>
          <h4 th:text="${loginurl}"></h4>
        </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>
      <h4>ID :</h4></td>
    <td>
      <h4 th:text="${id}"></h4>
    </td>
  </tr>
</table>

但更好的解决方案是在div标记中执行此操作，并通过添加css类来制作布局和样式。看看这个article

在thymaleaf中并排显示图像和文字

1 个答案: