html - Outlook 中 HTML 电子邮件的错误显示

Question

我有以下 HTML 电子邮件代码：

<div style="background-color:red;max-width:600px;height:140px;margin-left:auto;margin-right:auto;">

<img src="https://via.placeholder.com/140x99" height="140" width="99" style="height:140px;width:99px;display:block;border:0;float:right;margin:0px;padding:0px;">

<p style="margin:0;font-size:30px;font-weight:700;padding-left:10px;margin-top:0px;padding-top:10px;">This is an important example header!</p>

</div>

我希望 HTML 像这样呈现：

文本在左侧，图像在右侧，并且与红色父元素具有相同的高度。

我用所有 86 个电子邮件渲染器对此进行了测试Email On Acid。HTML 代码在几乎所有电子邮件客户端上都能正确呈现。

但以下电子邮件客户端显示错误：

Outlook Office 356 (Windows 10)
Outlook 2007 (Windows 7)
Outlook 2010 (Windows 7)
Outlook 2013 (Windows 7)
Outlook 2016 (Windows 10)
Outlook 2019 (Windows 10)

我得到以下输出：

您会看到，图像在左侧，文本在图像下方。

我该怎么做才能在 Outlook 电子邮件客户端上也正确输出？

标签： htmlemailoutlookhtml-emailoutlook-2010

Answer 1

应用于align="right"图像。

注意：我不能 100% 确定它是否会起作用，因为我目前无法访问 Acid 上的电子邮件。

<div style="background-color:red;max-width:600px;height:140px;margin-left:auto;margin-right:auto;">

<img src="https://via.placeholder.com/140x99" align="right" height="140" width="99"
style="height:140px;width:99px;display:block;border:0;float:right;margin:0px;padding:0px;">

<p style="margin:0;font-size:30px;font-weight:700;padding-left:10px;margin-top:0px;padding-top:10px;">This is an important example header!</p>

</div>