在 Outlook html 电子邮件中，浮动不起作用

Question

我想要这个布局，我有一个矩形框。左边的方框内有一个文本，右边有一个图像。这在浏览器中看起来不错，但是当作为 html 电子邮件发送时，在 Outlook 中浮动右侧似乎不起作用。它将图像放在文本下方的下一行。关于如何使这项工作的任何想法？ （我尽量避免使用表格。）

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

Answer 1

简单的浮动图片可以像

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

您需要在其周围包裹一个“表格”元素，以使填充边距效果在 Gmail、Outlook（在线）、Microsoft Outlook（桌面客户端）...中工作...

给表格一个 align=left 或 right 属性。 （在这里编辑答案：此外，其他电子邮件客户端的后备也给表格一个浮动值，所以两者都这样做。它们是彼此的备份。一些客户理解“浮动”，其他人理解“对齐”，一些人同时理解， ...）您的表格将像图像一样漂浮在文本中。唯一的区别是，在 Outlook 中，表格会在文本中生成自动换行符，其中左对齐或右对齐的图像不会生成换行符。

为了设置边距，因为我们现在正在处理一个表格，所以在图像单元格的左侧或右侧添加一个宽度为“15”的额外“td”，并在其中添加一个不间断空格。 （或透明的 gif -> spacer.gif）

 

您最好不要将单元格留空，否则某些电子邮件客户端将不会考虑单元格的宽度

对于上边距和下边距，我们可以使用 'vspace' 属性，不要忘记给图像一个 align = left 或 right 属性。否则 'vspace' 将不起作用。

Answer 2

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

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

也许你也应该使用 !important；
我测试了它，它工作正常。

Answer 3

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

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

Answer 4

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

您可以使用外部表格代替浮动，并将您想要浮动的内容放在外部表格的左侧 td 中。

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

Answer 5

对话很晚，但这里是如何使用align="" 在 html 电子邮件中“浮动”。

Example here

另外，如果您正在寻找有关 html 电子邮件的资源（我假设您是因为您标记为正确的答案非常笼统），这里是 huge list of resources。

Answer 6

CampaignMonitor 为跨多个电子邮件客户端的所有 CSS 支持提供 this rather brilliant guide，也可以通过 pdf 或 xls 下载。

正如上面的答案所说，对 CSS 的电子邮件支持非常有限，主要是由于Microsoft's descision to use Word as its html rendering engine。

Answer 7

这是 Mail Chimp 关于 HTML 电子邮件编码的非常好的指南：

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

一些基本技巧：

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

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