在outlook html电子邮件中,float不起作用

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

在渲染HTML时,大多数电子邮件客户端都是原始的,会破坏很多格式良好的HTML元素.

我会推荐一些在线资源,例如:

如何编码HTML电子邮件:MailChimp

这个SO讨论可能会有所帮助:

有哪些HTML电子邮件设计指南？

Answer 2

谈话很晚,但这里是如何使用html电子邮件"浮动" align="".

这里的例子

此外,如果您正在寻找html电子邮件上的资源(我假设您作为答案,您标记的正确是非常一般的),这里有一个巨大的资源列表.

Answer 3

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

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

一些基本提示:

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

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

Answer 4

CampaignMonitor为多个电子邮件客户端的所有CSS支持提供了这个非常出色的指南,也可以作为pdf或xls下载获得.

正如上面的答案所说,对CSS的电子邮件支持非常有限,主要是因为微软决定使用Word作为其HTML渲染引擎.

Answer 5

简单的浮动图像可以像

<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 -> separator.gif）

 

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

对于顶部和底部边距，我们可以使用 'vspace' 属性，不要忘记给图像一个 align = left 或 right 属性。否则 'vspace' 将无法工作。