Html 相当于在 Outlook 中浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17674172/
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
Equivalent to float in Outlook
提问by Thomas Teilmann
I am trying to float: leftsome tables, but just encountered a major problem, outlook doesn't support float. Well, then I tried to use table align and so forth, but without luck. The tables just show up, under each other, instead of beside each other. Anything one can do about this?
我正在尝试float: left一些表，但刚遇到一个大问题，outlook 不支持浮动。好吧，然后我尝试使用 table align 等等，但没有运气。桌子只是出现在彼此下方，而不是彼此并排。对此有什么可以做的吗？
PS: it works on other devices just fine, its only Outlook, and I can't give each table a td, since it will break some other stuff.
PS：它在其他设备上工作得很好，只有 Outlook，我不能给每个表一个 td，因为它会破坏其他一些东西。
markup:
标记：
<table class="products">
<tr>
<td align="left" class="test">
<!-- Product 1 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<!-- Product 2 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<!-- Product 3 -->
<table align="center">
<tr>
<td class="product">
<a href="#">
<img src="#"/>
</a>
</td>
</tr>
</table>
<span class="clear"></span>
</td>
</tr>
</table>
回答by John
Set your widths on each aligned table using width="", not CSS.
使用 width="" 而不是 CSS 在每个对齐的表格上设置宽度。
An example that works:
一个有效的例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
table td { border-collapse: collapse; }
.msoFix { mso-table-lspace:-1pt; mso-table-rspace:-1pt; }
</style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div style="max-width:640px !important;">
<table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#CCCCCC">
<tr>
<td width="15" bgcolor="454545"> </td>
<td width="290" bgcolor="454545" align="left" style="padding: 0px;"> <br>Table 1<br>...<br>
</td>
<td width="15" bgcolor="454545"> </td>
</tr>
</table>
<table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
<tr>
<td width="15" bgcolor="959595"> </td>
<td width="290" bgcolor="959595" align="left" style="padding: 0px;"> <br>Table 2<br>...<br>
</td>
<td width="15" bgcolor="959595"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body></html>
Also, Outlook puts a 4-5 pixel gap between the aligned tables. Adding this trims it down to about 1px:
此外，Outlook 在对齐的表格之间放置了 4-5 像素的间隙。添加它会将其修剪到大约 1px：
<style type="text/css">
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
</style>
To get rid of it completely, you'll have to add borders to your tables (another Outlook quirk hack).
要完全摆脱它，您必须为表格添加边框（另一个 Outlook 怪癖黑客）。
回答by oezi
Just put every sub-tableinto an own tdof the outer table. as the td's are besides each other, the tables will be too.
只需将每个子table放入一个自己td的外部table. 由于td's 彼此相距甚远，因此tables 也将如此。
When trying to create HTML-EMails, Code like it's 1997.
在尝试创建 HTML-EMail 时，代码就像 1997 一样。
回答by stefan
If you can live with having the 2 tables not "responding" (one under each other) in Outlook, this worked for me:
如果您可以忍受 Outlook 中的 2 个表没有“响应”（一个在彼此下方），这对我有用：
........
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<!-- table 1 goes here -->
<!--[if gte mso 9]>
</td>
<td>
<![endif]-->
<!-- table 12 goes here -->
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
........
回答by Zaheer Ahmed
Use some online resources such as:
使用一些在线资源，例如：
When it comes to rendering HTML, most email clients are primitive and will break a lot of well formed HTML elements.
在呈现 HTML 时，大多数电子邮件客户端都是原始的，会破坏许多格式良好的 HTML 元素。
The following discussion may be helpful:
以下讨论可能会有所帮助：
What guidelines for HTML email design are there?
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 样式。
回答by Protector one
It seems Outlook.com filters out floatattributes completely, but does support display: inline-block.
Of course, this will most likely break your tables, as they depend on display:table, but it might help you with any divs.
Outlook.com 似乎float完全过滤掉了属性，但确实支持display: inline-block.
当然，这很可能会破坏您的表格，因为它们取决于display:table，但它可能会帮助您处理任何divs。
回答by user9347891
I know it's been long since the OP posted this question, but I hope it helps anyone who needs it.
我知道 OP 发布这个问题已经很久了，但我希望它可以帮助任何需要它的人。
If you need a 2 column layout, and you want it to work in Outlook as well, then provide a widthof around 45%for each table (to be safe, throw in a align="left"too in there). If you specify the width as 50%, Outlook (which has a mind of its own) would render it as a single column.
如果您需要一个 2 列布局，并且您希望它也能在 Outlook 中工作，那么为每个表提供一个width左右45%（为了安全起见，align="left"在那里也放入一个）。如果您将宽度指定为 50%，Outlook（它有自己的想法）会将其呈现为单列。
