显示：内联块不起作用 Outlook 电子邮件 HTML

【问题标题】：display: inline-block not working Outlook Email HTML显示：内联块不起作用 Outlook 电子邮件 HTML
【发布时间】：2018-05-24 14:17:34
【问题描述】：

我想在同一行电子邮件中设置一张表格和一张图片。 display: inline; 在任何浏览器中都可以正常工作，但在 Outlook 电子邮件中，所有内容都在一个列中，我需要它们在同一行中。请帮我解决。

<html>

<head>
  <title></title>
  <style>
    img {
      display: inline;
      width: 100px;
      height: 100px;
    }
    
    h1 {
      display: inline;
    }
  </style>
</head>

<body> <img src="Image1.jpg">
  <h1>afdsgdf dfgsdf dsfgf</h1> <img src="Image2.jpg">
</body>

</html>

【问题讨论】：

显示：Outlook 支持 inline-block。尝试将其添加为内联样式。

标签： python html css html-email

【解决方案1】：

为电子邮件客户端编写 HTML 代码与为 Web 浏览器编写代码完全不同。最重要的是，每个电子邮件客户端都会以不同的方式呈现您的代码。这是一个过于广泛的话题，因此我建议您在线进行一些研究。然而，为了让您开始，为电子邮件编写 HTML 最可靠的方法是使用带有 HTML 表格 tr td 标签等的表格布局。

还有许多电子邮件客户端会忽略样式标签，因此您可能希望像这样内联编写 CSS -

 <img style="display: inline; width: 100px; height: 100px;" src="img1.jpg" /> 
 <h1 style="display:inline"> Im a header </h1>

希望对你有帮助

【讨论】：

我的 Outlook 电子邮件无法正常工作。请提出任何其他方法。