css - 流畅的混合电子邮件的不均匀两列布局

Question

我正在使用流体混合方法为客户处理电子邮件。我正在尝试创建一个页脚，它是一个两列布局，但列不均匀。我正在寻找左列(包含图像)为电子邮件宽度的 58%(电子邮件的最大宽度为 600 像素)，右列(仅包含文本)为剩余的 42% 宽度。

通过 Litmus 进行测试时，我能够在大多数电子邮件客户端上毫无问题地显示它。 Outlook 2007、2010 和 Windows 10 邮件给我带来了问题。有什么想法吗？

这是我的 litmus build 的链接.

提前致谢!

Answer 1

我花了太长时间试图让 Outlook 遵守列宽，我会尝试以下操作:

麻烦表格的第一行只有一个 在每个单元格中明确设置宽度。

例如:

<table>
<tr>
<td width="58%">&nbsp;</td>
<td width="42%">&nbsp;</td>
<\tr>
...


这会阻止 Outlook 尝试变得聪明并将列的大小调整为它认为应该的样子。它的行为就好像它的宽度基于表格的第一行，因此设置明确的宽度而不包含任何内容通常可以达到目的。

否则，这是一个肮脏的把戏 - 嵌入一个不可见的 1px x 1px gif 很有用 - 因为你可以将它包含在每个顶行单元格中并设置它的宽度。这是连 Outlook 都无法忽视的事情。

<img src="1px.gif" height="1" width="58%" />