【问题标题】: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 电子邮件无法正常工作。请提出任何其他方法。
猜你喜欢
  • 1970-01-01
  • 2013-05-31
  • 2015-06-28
  • 2013-02-28
  • 2016-10-05
  • 2018-08-10
  • 2019-06-07
  • 2021-05-10
  • 2014-12-05
相关资源
最近更新 更多