Outlook中HTML邮件双列布局失效问题排查求助

问题根源 #

你当前的条件注释写法错误：为每一列单独创建了一个600px宽的完整表格，Outlook会将这两个表格识别为独立的块元素，自动垂直堆叠，所以显示为单列。正确的逻辑应该是用一个600px宽的表格包裹两个300px宽的单元格，将左右两列内容分别放入这两个单元格中。

修正后的代码 #

/* styling */
.two-col{
    text-align: center;
    padding: 10px 0;
    width: 100%;
    font-size: 0;
}

.col{
    display: inline-block;
    width: 100%;
    max-width: 300px;
    margin-bottom: 5px;
    vertical-align: top;
}
.padding{
    padding: 25px;
}

.content{
    font-size: 15px;
    text-align: left;
}

<tr>
    <td>
        <table role="presentation" width="100%">
            <tr>
                <td class="two-col">
                    <!--[if mso]>
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
                    <tr>
                    <td width="300" valign="top">
                    <![endif]-->
                    <table role="presentation" class="col">
                        <tr>
                            <td class="padding">
                                <table class="content">
                                    <tr>
                                        <td>
                                            <img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/handsPinch.png" alt="Hands Pinch">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <h2>
                                                Customize this email template!
                                            </h2>
                                            <p style="line-height: 24px;">
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum mattis nisi mauris pharetra ullamcorper. 
                                            </p>
                                            <a href="#" role="button"><img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/Button.png" alt="Try it now"></a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <!--[if mso]>
                    </td>
                    <td width="300" valign="top">
                    <![endif]-->
                    <table role="presentation" class="col">
                      <tr>
                        <td class="padding">
                            <table class="content">
                                <tr>
                                    <td>
                                        <img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/handsGive.png" alt="Hands Give">
                                    </td>
                                </tr>
                                <tr >
                                    <td>
                                        <h2>Customize this email template!</h2>
                                        <p style="line-height: 24px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum mattis nisi mauris pharetra ullamcorper.</p>
                                        <a href="#" role="button"><img src="https://raw.githubusercontent.com/Devibtissam/emailHtmlImgs/master/img/Button.png" alt="Try it now"></a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                      </tr>
                    </table>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </td>
            </tr>
        </table>
    </td>
</tr>

关键点说明 #

• 仅在开头用一次<!--[if mso]>，创建包含两个300px单元格的600px表格
• 两列内容分别放入对应的<td>中，用valign="top"保证顶部对齐
• 非Outlook环境的inline-block布局保留，不影响其他客户端的响应式显示

内容的提问来源于stack exchange，提问作者ibtissam elhammoumy