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讨论可能会有所帮助：

What guidelines for HTML email design are there?

Answer 2

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

Example here

此外，如果您正在寻找html电子邮件上的资源（我认为您作为答案，您标记的正确是非常一般的），这里是huge list of resources。

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支持提供this rather brilliant guide，也可以pdf或xls下载。

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

Answer 5

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

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

也许你应该使用！important ;
我测试了它并且它起作用了。

Answer 6

在这里查看https://www.campaignmonitor.com/css/它列出了所有支持的内容，但不支持电子邮件

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

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

Answer 7

简单浮动图像可以像

-Wl,--as-needed

但是，通过文本和图像之间的填充，您无法获得可靠的结果，Outlook会删除边距和填充，并且文本将紧贴在图像旁边。所以试试这个：

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

你需要包装一张桌子＆＃39;它周围的元素，以使填充边距效果在Gmail，Outlook（在线），Microsoft Outlook（桌面客户端）中有效...

为表格提供align = left或right属性。（在这里编辑答案：此外，其他电子邮件客户端的后备也会给表一个浮动值，所以两者都有。它们是彼此的备份。有些客户理解＆＃34;浮动＆＃34;其他人理解＆＃34 ;对齐＆＃34;，有些人理解这两个，...）你的桌子会漂浮在文字中，就像图像一样。唯一的区别是，在outlook中，表格在文本中生成自动换行符，其中左对齐或右对齐的图像不会生成中断。

为了设置保证金，因为我们现在正在使用表格，所以添加额外的＆＃34; td＆＃34;宽度=＆＃34; 15＆＃34;在图像单元格的左侧或右侧以及其中的非破坏空间。（或透明的gif - ＆gt; spacer.gif）

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

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

对于上边距和下边距，我们可以使用＆＃39; vspace＆＃39;属性，不要忘记给图像一个align = left或right属性。否则，＆＃39; vspace＆＃39;不行。

Answer 8

当你向某些东西漂浮某物时，正确的浮动元素应始终在代码中首先出现。像这样：

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

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

8 个答案: