为响应式 html 电子邮件左右对齐表格 - Outlook 2010 问题答案

【问题标题】：aligning tables left and right for responsive html emails - Outlook 2010 Issue为响应式 html 电子邮件左右对齐表格 - Outlook 2010 问题
【发布时间】：2022-03-21 19:14:40
【问题描述】：

我在电子邮件即时通讯编码的“导航”区域遇到问题。它在所有浏览器中都可以正常工作并且可以响应式工作，但是在 Outlook 中打开时会这样做 (http://imgur.com/3Ivr3pu)。

该块的代码如下。

有什么想法可以让它坐在左边的元素旁边吗？

<layout label='Nav'>
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="580" class="deviceWidth" style="mso-table-lspace:0;mso-table-rspace:0;">
    <tr>
    <td>


<table border="0" cellpadding="0" cellspacing="0" align="left" width="50%" class="deviceWidth" style="mso-table-lspace:0;mso-table-rspace:0; border-collapse:collapse;">
<tr bgcolor="#9cacbc"><td class="borderBottom" width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: Arial, Helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px; border-right: 1px solid #ffffff;">
    <singleline><a href="#" title="Brochures" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">Brochures</font></a></singleline>
</td>
<td class="noBorder borderBottom" width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: Arial, Helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px;border-right: 1px solid #ffffff;">
        <singleline><a href="#" title="Specials" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">Specials</font></a></singleline>
</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" align="right" width="50%" class="deviceWidth" style="mso-table-lspace:0;mso-table-rspace:0; border-collapse:collapse;">
<tr bgcolor="#9cacbc"><td width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: Arial, Helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px; border-right: 1px solid #ffffff;">
        <singleline><a href="#" title="Destinations" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">Destinations</font></a></singleline>
</td>
<td width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: Arial, Helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px;">
        <singleline><a href="#" title="Contact us" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">Contact us</font></a></singleline>

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

</td></tr>
</table>
</layout>

【问题讨论】：

标签： html css email outlook

【解决方案1】：

事实上，Outlook 使用 Word（而不是 IE）来呈现 HTML 标记。尝试在 Word 中打开页面以确保其正常工作。您可以在 MSDN 的以下系列文章中了解支持和不支持的 HTML 元素、属性和级联样式表属性：

希望这些信息对您有所帮助。

【讨论】：

【解决方案2】：

方法一：VML
方法2：使用单元格（td）而不是浮动表格。

【讨论】：