相当于在 Outlook 中浮动答案

【问题标题】：Equivalent to float in Outlook相当于在 Outlook 中浮动
【发布时间】：2013-07-14 11:51:25
【问题描述】：

我正在尝试float: left一些表，但刚刚遇到一个大问题，outlook 不支持浮动。好吧，然后我尝试使用表格对齐等，但没有运气。这些表格只是显示在彼此下方，而不是彼此并排。对此有什么可以做的吗？

PS：它可以在其他设备上正常工作，它只有 Outlook，我不能给每个表一个 td，因为它会破坏一些其他东西。

标记：

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

【问题讨论】：

重复条目？ stackoverflow.com/questions/15367542/…

标签： html css outlook html-table html-email

【解决方案1】：

使用 width="" 设置每个对齐表格的宽度，而不是 CSS。

一个有效的例子：

<!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">&nbsp;</td>
            <td width="290" bgcolor="454545" align="left" style="padding: 0px;">&nbsp;<br>Table 1<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="454545">&nbsp;</td>
          </tr>
        </table>

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
          <tr>
            <td width="15" bgcolor="959595">&nbsp;</td>
            <td width="290" bgcolor="959595" align="left" style="padding: 0px;">&nbsp;<br>Table 2<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="959595">&nbsp;</td>
          </tr>
        </table>

      </div>
    </td>
  </tr>
</table>

</body></html>

此外，Outlook 在对齐的表格之间放置了 4-5 像素的间隙。添加这个会将其缩小到大约 1px：

<style type="text/css">
   .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }
</style>

要完全摆脱它，您必须为表格添加边框（另一个 Outlook 怪癖黑客）。

【讨论】：

这在 Outlook 2013 中对我不起作用（从 ALIGN="LEFT" 表中删除添加的空白），但只需将 ALIGN="LEFT" 添加到 IMG 标签本身就完全可以正常工作在 Outlook 中......这很疯狂。

【解决方案2】：

只需将每个子table 放入外部table 的自己的td 中。由于td 彼此相邻，所以tables 也会。

尝试创建 HTML 电子邮件时，Code like it’s 1997。

【讨论】：

但是，当站点变窄时，它会跳下来吗？在移动设备上是否可以将每个屏幕居中？因为当它们在彼此下方时，每个都在自己的 td 中，我认为不可能将它们放在屏幕上？
不，它们会在每个屏幕上彼此并排。可悲的是，您无法避免这种情况 - 电子邮件客户端中的 HTML 呈现通常比 IE6 更糟糕...

【解决方案3】：

如果您可以忍受 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]-->
........

【讨论】：

【解决方案4】：

使用一些在线资源，例如：

How To Code HTML Emails

在呈现 HTML 时，大多数电子邮件客户端都是原始的，会破坏许多格式良好的 HTML 元素。

以下讨论可能会有所帮助：

What guidelines for HTML email design are there?

一些基本技巧：

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

【讨论】：

【解决方案5】：

看来 Outlook.com 完全过滤掉了 float 属性，但确实支持 display: inline-block。
当然，这很可能会破坏您的表格，因为它们依赖于display:table，但它可能会帮助您处理任何divs。

【讨论】：

【解决方案6】：

我知道 OP 发布这个问题已经很久了，但我希望它可以帮助任何需要它的人。

如果您需要 2 列布局，并且希望它也能在 Outlook 中工作，请为每个表格提供大约 45% 的 width（为了安全起见，也可以在其中输入 align="left" )。如果您将宽度指定为 50%，Outlook（它有自己的想法）会将其呈现为单列。

【讨论】：