在Outlook的HTML邮件中，浮动不起作用。

Question

我想要这样的布局，有一个矩形框。框内左侧是文本，右侧是图像。在浏览器中看起来很好，但当作为HTML邮件发送时，在Outlook中float right似乎不起作用。它会把图像放在文本下面的下一行。如何使其工作？（我正在尝试避免使用表格。）

<div style="width: 100%;border-style:solid;overflow: hidden;">

    <span style="float: left;">  
         <h3> Your appointment Details</h3>
    </span> 
    <span style="float: right;">
        <img src="someImage"/>
    </span>

</div>

- Foo

---

在开发HTML电子邮件时，回到黑暗时代。在表格中布局所有内容，将样式放置在内部，定义每个宽度和高度，使用空白像素图。不要期望电子邮件客户端能够正确地呈现任何东西。 - idrumgood

Answer 1

虽然有点晚了，但以下是如何在html电子邮件中使用 align="" 来实现“浮动”的方法。

示例请查看这里

此外，如果您正在寻找关于html电子邮件的资源（我想您是的，因为您选择的答案非常通用），这里是一个大量资源的列表。

- John

---

正是所需。此外，这里有一篇与此相关的Campaign Monitor链接。https://www.campaignmonitor.com/blog/email-marketing/2013/01/outlook-com-drops-margin-and-float-support-entirely/ - Nick Johnson

Answer 2

这是Mail Chimp关于编写HTML邮件的非常好的指南:

http://kb.mailchimp.com/article/how-to-code-html-emails

一些基本提示：

• 使用表格进行布局。
• 将最宽的表格设置为最大600px宽度。
• 不要尝试使用JavaScript或Flash。
• 不要在样式标签中使用CSS，因为某些邮件客户端会将其丢弃。
• 仅使用内联CSS样式。

基本上，将您的电子邮件编码成大约2003年的样子。

- Billy Moat

---

那么，除了浮动左侧或使用左/右外边距之外，还有什么替代方案？ - ErickBest

Answer 3

简单的浮动图片可以像这样：

<img src="yourimage" align="left" />

但是这样做，您将无法获得文本和图像之间的实心结果，Outlook会移除边距和填充，导致您的文本紧贴在图像旁边。因此，请尝试以下方法：

<div style="text-align:justify;">

...a lot of text here untill you want to insert an image that floats left...

    <table cellpadding="0" cellspacing="0" align="left" style="float: left;">
        <tr>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
            <td width="15">&nbsp;</td>
        </tr>
    </table>

...a lot more text here until you need an image that floats right...

    <table cellpadding="0" cellspacing="0" align="right" style="float: right;">
        <tr>
            <td width="15">&nbsp;</td>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
        </tr>
    </table>

... a lot more text here...

</div>

您需要在其周围包装一个“table”元素，以使填充边距效果在Gmail、Outlook（在线）、Microsoft Outlook（桌面客户端）等中正常工作。给表格添加align=left或right属性。(编辑答案：另外，为了其他电子邮件客户端的回退，还应该给表格添加一个浮动值，这样两者都可以做备份。有些客户端理解“float”，有些理解“align”，有些都理解...)您的表格将在文本中像图像一样浮动。唯一的区别是，在Outlook中，表格会在文本中生成自动换行，而左对齐或右对齐的图像不会生成换行。对于设置边距，由于我们现在正在使用表格，因此在图像单元格的左侧或右侧添加一个额外的“td”，并在其中添加一个width="15"的非间断空格。(或透明gif -> spacer.gif)

 

不要留空单元格，否则在某些电子邮件客户端中，单元格的宽度将不被尊重。

对于顶部和底部边距，我们可以使用“vspace”属性，不要忘记为图像添加align = left或right属性。否则，“vspace”将无效。

- Julesezaar

---

在Outlook中，“img”上的“align =”right“”非常适合作为“style =”float：right“”的hacky回退。 - Yuri

这是我在Outlook 2016和Outlook Web上与用户一起使用的唯一有效方法。另一个优点是它适应了人们打开电子邮件的不同宽度窗口，而其他人都没有涵盖到。太棒了！！ - matt

Answer 4

CampaignMonitor提供这个非常棒的指南，涵盖了多个邮件客户端对CSS的支持情况，同时也可以下载pdf或xls格式。

正如上面的答案所说，由于微软选择使用Word作为其HTML渲染引擎, 邮件对CSS的支持非常有限。

- Sinister Beard

Answer 5

我找到了一种在Outlook.com上应用浮动的方法。 只需将标签大写，如Float:left。

<span style="Float:left;">Content to float</span>

也许你也应该使用!important；
我测试过它可以正常工作。

- Didier Margarido

---

我怀疑这是你在欺骗 Outlook.com 上的逻辑，试图使其看起来与桌面版本完全相同，以免除浮动。对桌面客户端没有影响。 - Hayden Crocker

虽然有些样式可能不被支持，但最常见的问题是 !important。任何带有 !important 的内联样式都将被忽略。 - andrepazleal

Answer 6

请查看https://www.campaignmonitor.com/css/，其中列出了电子邮件支持和不支持的所有内容。

您可以使用外部表格而不是float，并将要向左浮动的内容放在外部表格的左侧td中。

这不是一个优雅的答案，但我是这样做的。

- Pratik

Answer 7

当您将某物浮动到某物的右侧时，右侧浮动元素应始终首先出现在代码中。像这样：

<div style="width: 100%;border-style:solid;overflow: hidden;">
    <img src="someImage"  style="float: right;"/>
    <h3> Your appointment Details</h3>
</div>

- user301441