【问题标题】:Margin between image and wrapping text doesn't appear properly in Window Outlook (Email HTML)图像和换行文本之间的边距在 Window Outlook(电子邮件 HTML)中显示不正确
【发布时间】:2021-06-25 04:00:24
【问题描述】:

我正在制作电子邮件通讯的模板,其中一个部分有一个围绕文本的图像。它们之间的间距在其他电子邮件中效果很好,但在发送到 Outlook Windows 时会中断。

How it looks in Outlook Windows

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;margin-top: 0;margin-right:0;margin-bottom: 40px;margin-left: 0;text-align: left;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center">
            <tr style="margin-top: 0;margin-right:0;margin-bottom: 32px;margin-left: 0;-ms-text-size-adjust: 100%;"><td style="-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                <h2 style="font-size: 30px;font-weight: 500;text-align: center;line-height: 48px;margin-top: 40px;margin-right: 0;margin-bottom: 32px;margin-left: 0;-ms-text-size-adjust: 100%;">Topic one here</h2>
            </td></tr>
            <tr style="-ms-text-size-adjust: 100%;"><td style="-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                <img src="https://www.aesop.com/u1nb1km7t5q7/4uahoGkAUbKTdgi26UWS8U/d35893987804270676a1ab2a46ad2038/Our-Story-Carousel-1-Desktop-2880x1620.jpg" align="left" alt="Topic 1" style="width: 250px;margin-top: 0;margin-right:16px;margin-bottom: 8px;margin-left: 0;-ms-text-size-adjust: 100%;-ms-interpolation-mode: bicubic; display: block;"><p style="font-size: 16px;font-weight: medium;line-height: 27px;color: #333;margin-top: 0;margin-right:0;margin-bottom: 16px;margin-left: 0px;-ms-text-size-adjust: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique eros magna. Duis pretium finibus urna id vestibulum. Quisque sollicitudin eros ultricies, finibus lacus suscipit, viverra ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique eros magna. Duis pretium finibus urna id vestibulum. Quisque sollicitudin eros ultricies, finibus lacus suscipit, viverra ante.</p>
                <p style="font-size: 16px;font-weight: medium;line-height: 27px;color: #333;margin-top: 0;margin-right:0;margin-bottom: 16px;margin-left: 0;-ms-text-size-adjust: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique eros magna. Duis pretium finibus urna id vestibulum. Quisque sollicitudin eros ultricies, finibus lacus suscipit, viverra ante.</p>
            </td></tr>

【问题讨论】:

  • 我没有看到代码中有任何错误。您可以尝试使用溢出:隐藏吗?在第一个
  • ^ 不幸的是,这个答案无济于事。

标签: html windows outlook


【解决方案1】:

很遗憾,您很可能无法在 Outlook 中使用它。这种类型的布局不利于根据需要添加间距或填充,就像使用表格单元格或 div 一样。

您最好将这两个元素设置在两个表格单元格中,甚至更好 - 两个对齐的表格,以便它们可以在移动设备上堆叠。这两种方法的唯一缺点是文本将不再能够像您目前拥有的那样环绕图像。

适用于 Windows 的桌面 Outlook 程序还没有赶上电子邮件的最新功能,而且很可能在很长一段时间内都赶不上!

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签