在 Outlook 中浮动替换电子邮件答案

【问题标题】：Float replacement for email in outlook在 Outlook 中浮动替换电子邮件
【发布时间】：2013-08-29 01:59:38
【问题描述】：

这是this question 的后续问题。

我正在写这封两栏的电子邮件，有人建议我在我的 td 上使用 float:left，以便宽度适合电子邮件。但是，我认为 Outlook 不支持浮点数，并且我的右列被推到了整个表格的范围之外。

Here 是电子邮件在 Outlook 中呈现方式的屏幕截图：

代码可以在here找到。

【问题讨论】：

请改写：“有人建议我在我的 td 上使用 float:left，以便宽度适合电子邮件。”
浮动可以解决的宽度到底有什么问题？
如果您观察另一个问题，您可以看到浮动两个 td 固定了 td 的宽度，因此左侧 td 不会占据电子邮件的整个宽度，将右侧 td 推到边界之外.
好的。我现在明白了;我更新了我的答案。
您应该使用嵌套表并且只使用嵌套表。虽然编码需要更长的时间，但它是目前唯一的 html 电子邮件编码方法。并且有足够的手指汗水，您可以使用这些复制任何布局，您只需要正确剪切图像并干净地编写您的标记。（没有什么比电子邮件中断更糟糕的了，因为您忘记了一行/colspan 或关闭了一个 tr...

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

【解决方案1】：

浮动td 是一件非常奇怪的事情。我没有尝试过，但我的猜测是某些版本的 IE 根本不会做任何事情（因此，出于您的担忧，某些版本的 Outlook 可能会显示相同的行为，或者不会显示相同的行为，具体取决于版本和安装 MS 的顺序Office 和 IE）。

为电子邮件客户端浮动任何元素也是一个坏主意，因为 hotmail/outlook.com 和大多数 Outlook 桌面版本不支持 float 属性。

见：http://www.campaignmonitor.com/css/

编辑：它与浮动或对齐无关。该表中有 6 行，第二行有 2 列，其余的都有 1 列。每个表必须有相同数量的列，因此您可以在其他所有 5 个 tr 上使用 colspan 属性，以便该表占具有 2 个 td 的 tr，例如这个<tr colspan="2"...。然后去掉所有的浮动，是不必要的。

【讨论】：

是的，我知道浮动 td 是不好的做法，但是我还没有找到另一种方法来固定第一个 td 的宽度，图像不会拉伸到表格的整个宽度。我尝试设置 td 宽度，将表格布局设置为固定，使用对齐，但没有任何工作。
添加 colspan 可能允许页眉和页脚覆盖正文中的额外单元格，但您无法完全控制单元格宽度。通过定义一个新表，您可以设置您喜欢的任何宽度，只要它在父表宽度约束内。

【解决方案2】：

您可以使用 align 属性实现类似的浮动效果，例如 align="left" 和嵌套表格。

<table cellpadding="0" cellspacing="0" border="1" width="600">
<tr>
    <td align="center" height="100" width="600">
        header
    </td>
</tr>
<tr>
    <td>
        <table align="left" cellpadding="0" cellspacing="0" border="1" height="50" width="298">
            <tr>
                <td>
                      column 1 
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="1" height="50" width="298">
            <tr>
                <td>
                      column 1 
                </td>
            </tr>
        </table>
    </td>
</tr>

 <tr>
    <td align="center" height="100" width="600">
        footer
    </td>
</tr>

这是fiddle。我希望这会有所帮助。

【讨论】：