Question

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

有关使display:inline-block工作的任何建议或任何其他适用于Outlook和Gmail的解决方案吗？

这是我的代码：

＆＃13;

<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>

＆＃13;

谢谢

Answer 1

尝试使用float：left的样式为＆＃34; a＆＃34;和＆＃34; span＆＃34;

<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?

Answer 2

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

Outlook 2000-03   部分。支持block，inline，list-item和none。

Outlook 2007-16   部分。有时候不支持。

Outlook Express   部分。支持block，inline，list-item和none。

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

Outlook不支持<div>

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

Div styles not working in Outlook Emails

祝你好运。

display：inline-block not working outlook / gmail

2 个答案: