Question

在我提前做出贡献之前，我将承诺犯下主要的互联网罪并请求你的一些事情，请接受毫无保留的道歉。

但在我的辩护中，Outlook让我受苦。

这是我的代码：

<table class="100p" border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns" >
    <tr>
        <td align="center" valign="top">
            <table align="left" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
                <tr>
                    <td class="leftColumnContent">
                        <img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
			
			
			<table align="right" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
                <tr>
                    <td class="rightColumnContent">
                        <img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>
<br>

我的问题是，在浏览器和Outlook以外的电子邮件客户端中，表的内容会根据屏幕大小按行或堆叠显示。

然而，在Outlook中并非如此。我的“右栏”显示在我的“左栏”下方并与右侧对齐。

如何使Outlook符合要求？

如果这是一个反复出现的问题，再次表示感谢和抱歉，我很感激它可能会令人恼火！

约瑟夫

Answer 1

一列中有两个表。使用</td><td>结束第一个表，将2个表分成不同的列

＆＃13;

<table class="100p" border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns" >
    <tr>
        <td align="center" valign="top">
            <table align="left" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
                <tr>
                    <td class="leftColumnContent">
                        <img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="leftColumnContent">
                        <h1>Left Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table align="right" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
                <tr>
                    <td class="rightColumnContent">
                        <img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="rightColumnContent">
                        <h1>Right Column</h1>
                        Lorem ipsum dolor sit amet.
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<br>

＆＃13;

响应式HTML电子邮件表在Outlook中无法正确显示

1 个答案: