CSS 在 Outlook html 电子邮件中，浮动不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15367542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In outlook html email, float does not work
提问by Foo
I want this layout where I have a rectangular box. And inside the box on the left there is a text and on the right there is an image. This looks fine in the browser, but when sent out as an html email, in outlook the float right doesn't seem to work. It puts the image in the next line under the text. Any ideas on how to make this work? (I am trying to avoid using tables.)
我想要这个布局，我有一个矩形框。在左边的框中有一个文本，在右边有一个图像。这在浏览器中看起来不错，但是当作为 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>
采纳答案by Marc Audet
When it comes to rendering HTML, most email clients are primitive and will break a lot of well formed HTML elements.
在呈现 HTML 时，大多数电子邮件客户端都是原始的，会破坏许多格式良好的 HTML 元素。
I would recommend some online resources such as:
我会推荐一些在线资源，例如：
How To Code HTML Emails: MailChimp
This SO discussion may be helpful:
这个 SO 讨论可能会有所帮助：
回答by John
Very late to the conversation, but here is how to "float" in html email using align=""instead.
谈话很晚，但这里是如何使用 html 电子邮件“浮动” align=""。
Also, if you are looking for resources on html email (I assume you are as the answer you marked correct is very general), here is a huge list of resources.
此外，如果您正在 html 电子邮件中寻找资源（我假设您是因为您标记为正确的答案非常笼统），这里有一个巨大的资源列表。
回答by Billy Moat
This is a really good guide from Mail Chimp on Coding for HTML Emails:
这是 Mail Chimp 关于 HTML 电子邮件编码的非常好的指南：
http://kb.mailchimp.com/article/how-to-code-html-emails
http://kb.mailchimp.com/article/how-to-code-html-emails
Some basic tips:
一些基本提示：
- Use tables for layout.
- Set your widest table to be maximum of 600px wide.
- Don't try and use JavaScript or Flash
- Don't use CSS in a style tag as some mail clients will discard it.
- Use inline CSS styles only.
- 使用表格进行布局。
- 将最宽的表格设置为最大 600 像素宽。
- 不要尝试使用 JavaScript 或 Flash
- 不要在样式标签中使用 CSS，因为某些邮件客户端会丢弃它。
- 仅使用内联 CSS 样式。
Basically code your emails as if it was roughly 2003.
基本上将您的电子邮件编码为大约 2003 年。
回答by Sinister Beard
CampaignMonitor provide this rather brilliant guideto all CSS support across multiple email clients, which is also available as a pdfor xlsdownload.
CampaignMonitor 为跨多个电子邮件客户端的所有 CSS 支持提供了这个相当出色的指南，也可以pdf或xls下载。
As the answers above say, email support for CSS is very limited, mostly due to Microsoft's descision to use Word as its html rendering engine.
正如上面的答案所说，电子邮件对 CSS 的支持非常有限，主要是由于Microsoft 决定使用 Word 作为其 html 渲染引擎。
回答by Julesezaar
Simple floating images can be like
简单的浮动图像可以像
<img src="yourimage" align="left" />
BUT that way you won't get solid results with padding between text and image, outlook removes margin and padding and your text will stick right next to the image. So try this:
但是这样一来，文本和图像之间的填充就不会得到可靠的结果，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"> </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"> </td>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
</tr>
</table>
... a lot more text here...
</div>
You need to wrap a 'table' element around it to get the padding-margin effect to work in Gmail, Outlook (online), Microsoft Outlook (desktop client),...
您需要在其周围包裹一个“表格”元素，以获得在 Gmail、Outlook（在线）、Microsoft Outlook（桌面客户端）、...
Give the table an align=left or right attribute. (Edit answer here: in addition and fallback for other email clients also give the table a float value so do both. They are back-ups to each other. Some clients understand "float", others understand "align", some understand both,...) Your table will float in the text almost like an image does. The only difference is that in outlook a table generates an automatic line break in the text where an image with align left or right does not generate breaks.
给表格一个 align=left 或 right 属性。（在此处编辑答案：此外和其他电子邮件客户端的后备也给表格一个浮点值，所以两者都是。它们是彼此的备份。一些客户理解“浮动”，其他人理解“对齐”，有些人理解两者， ...）您的表格将几乎像图像一样漂浮在文本中。唯一的区别是，在 Outlook 中，表格会在文本中生成自动换行符，而左对齐或右对齐的图像不会生成换行符。
For setting the margin, since we are now working with a table, add an extra "td" with a width="15" to the left or right of your image cell and a non-breaking-space in it. (or a transparant gif -> spacer.gif)
为了设置边距，因为我们现在正在处理一个表格，所以在图像单元格的左侧或右侧添加一个宽度为 15 的额外“td”，并在其中添加一个不间断空格。（或透明的 gif -> separator.gif）
You better not leave cells empty because otherwise the width of your cell will not be respected in certain email clients
您最好不要将单元格留空，否则某些电子邮件客户端将不会考虑您的单元格宽度
For top and bottom margin we can use the 'vspace' attribute, don't forget to give the image an align = left or right attribute. Otherwise the 'vspace' will not work.
对于顶部和底部边距，我们可以使用 'vspace' 属性，不要忘记给图像一个 align = left 或 right 属性。否则 'vspace' 将无法工作。
回答by Didier Margarido
I've found a way to apply floaton Outlook.com.
Just capitalizethe tag like Float:left.
我找到了一种在 Outlook.com上应用浮动的方法。
只需将标签大写，如Float:left。
<span style="Float:left;">Content to float</span>
Maybe you should use !importanttoo;
I tested it and it worked.
也许你也应该使用!important；
我测试了它并且它起作用了。
回答by Pratik
check out https://www.campaignmonitor.com/css/here it has listed what are all the things supported and not supported in email
查看https://www.campaignmonitor.com/css/这里列出了电子邮件中支持和不支持的所有内容
Instead of float you can use an outer table and put contents you want to float left in left td of outer table.
您可以使用外部表代替浮动，并将要浮动的内容放在外部表的左侧 td 中。
this is not an elegant answer but I did it this way
这不是一个优雅的答案，但我是这样做的
回答by user301441
When you are floating something to the right of something the right floating element should allways apear first in code. Like this:
当您将某物浮动到某物的右侧时，正确的浮动元素应始终首先出现在代码中。像这样：
<div style="width: 100%;border-style:solid;overflow: hidden;">
<img src="someImage" style="float: right;"/>
<h3> Your appointment Details</h3>
</div>
