HTML table 对齐方式不正确

Question

我目前正在创建 HTML 电子邮件模板。我有一个包含 3 列的 table，用于以下内容：

[[标志][文字内容][日期]]

因此徽标应左对齐，日期应右对齐。然而，在 outlook 中，浮动似乎没有被接受。 this is how it currently looks.

这是我当前的代码：

<table cellspacing="0" cellpadding="0" border="0" style="display:flex; flex-wrap: wrap; margin-bottom:10px; width:100%;">
  <tbody>
    <tr>
      <td width="6%"> <img style="float:left; margin-right:10px;" height="24px" width="30px" src="{{imageUrl}}">
      </td>
      <td width="63%;">
        {{this.notificationMessage}}
      </td>
      <td width="30%" style="text-align:right; margin-left:6px;">{{this.date}}
      </td>
    </tr>
  </tbody>
</table>

我被这个问题困扰了一段时间，非常感谢任何帮助

Answer 1

您也可以在

上给 "text-align: left" 而不是 "float: left"

Answer 2

HTML 应该编码为 1999 年。

应使用表格进行布局，并尽可能避免使用现代 HTML 和 CSS。

在您上面的例子中，您应该只在 table 单元格上使用对齐属性，例如

<td align=left"></td>

<td align=right"></td>

如果这不起作用，请尝试使用 CSS，例如

<td style="text-align: left;"></td>

这是从 Mailchimp 创建 HTML 电子邮件模板的好指南：

https://templates.mailchimp.com/getting-started/html-email-basics/

Answer 3

你可以使用 Float: right 我认为你应该省略任何关于 flex 的东西（我的意思是：display:flex; flex-wrap: wrap;）。

<html>
<body>
<table cellspacing="0" cellpadding="0" border="0" style=" margin-bottom:10px; width:100%;">
   <tbody>
      <tr>
         <td width="6%"> <img style="float:left; margin-right:10px;" height="24px" width="30px" src="img.."> 
         </td>
         <td width="63%;">
           aa
         </td>
         <td width="30%" style="text-align:right;float:right; margin-left:6px;">bb
         </td>
      </tr>
   </tbody>
</table>
</body>
</html>

Answer 4

你必须 style="text-align:left; " 才能 td。

使用下面更正的代码。

<table cellspacing="0" cellpadding="0" border="0" style="display:flex; flex-wrap: wrap; margin-bottom:10px; width:100%;">
  <tbody>
    <tr>
      <td width="6%" style="text-align:left;" > <img style="float:left; margin-right:10px;" height="24px" width="30px" src="{{imageUrl}}">
      </td>
      <td width="63%;" style="text-align:left;" >
        Notification message
      </td>
      <td width="30%" style="text-align:right; margin-left:6px;">date
      </td>
    </tr>
  </tbody>
</table>

HTML table 对齐方式不正确

HTML table alignment not working correctly

html

css

layout

html-email