display：inline-block not working outlook / gmail

Posted 2021-05-03

我正在开发电子邮件模板，我需要使用display:inline-block，但它不适用于gmail和outlook。我只需要将图像与文本对齐，我就不能使用表格了。

任何使display:inline-block工作的建议或任何其他适用于outlook和gmail的解决方案？

我的代码：

<div>


  <span style="display:inline-block;">this is not<br/> working:</span>
  <a href="" target="_blank"><img style="vertical-align:middle;" alt="" border="0" src="img.jpg"></a>


</div>

谢谢

答案

尝试使用float：left的风格为“a”和“span”

<span style="float:left;">this is not<br/> working:</span>
    <a style="float:left;" href="" target="_blank"><img  alt="" border="0" src="yourImage.jpg"></a>

它适用于我的代码

如果它不适用于outlook，那是因为在渲染html时，大多数电子邮件客户端都是原始的，会破坏很多格式良好的HTML元素。

我会推荐一些在线资源，例如：

如何编码HTML电子邮件：MailChimp

这个SO讨论可能会有所帮助：

What guidelines for HTML email design are there?

另一答案

对于display:inline-block;，Outlook只有部分支持。 Gmail应该可以正常使用。

Outlook 2000-03部分。支持块，内联，列表项和无。

Outlook 2007-16部分。有时支持无。

Outlook Express部分。支持块，内联，列表项和无。

• https://www.campaignmonitor.com/css/

Outlook不支持<div>

Outlook并不真正支持<div>类和样式您可以使用它们，但样式并不总是被应用。我建议一个可靠的表格。

• Div styles not working in Outlook Emails

祝好运。