在 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 个 td
的 tr
,例如这个<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 2007 的解决方法,用于在带有边距的图像周围环绕文本?