在 Outlook 中浮动替换电子邮件

Posted

技术标签:

【中文标题】在 Outlook 中浮动替换电子邮件【英文标题】:Float replacement for email in 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... 【参考方案1】:

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

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

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

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

更多信息请参见http://www.w3.org/TR/REC-html40/struct/tables.html#adef-colspan。

【讨论】:

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

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

<table cellpadding="0" cellspacing="0" border="1" >
<tr>
    <td align="center"  >
        header
    </td>
</tr>
<tr>
    <td>
        <table align="left" cellpadding="0" cellspacing="0" border="1"  >
            <tr>
                <td>
                      column 1 
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="1"  >
            <tr>
                <td>
                      column 1 
                </td>
            </tr>
        </table>
    </td>
</tr>

 <tr>
    <td align="center"  >
        footer
    </td>
</tr>

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

【讨论】:

以上是关于在 Outlook 中浮动替换电子邮件的主要内容,如果未能解决你的问题,请参考以下文章

使用电子邮件 Outlook 中的链接触发 VBA 代码

Outlook 2007 的解决方法,用于在带有边距的图像周围环绕文本?

当我有来自的命名附件时,Outlook 365 不接受 Python 电子邮件消息库输出

如何在outlook中查找邮件附件内容?

Mac outlook本地邮件保存在哪

如何在 Outlook 中读取 Internet 标题和电子邮件