Html 如何在响应电子邮件模板中堆叠列？

我试图在大屏幕上并排显示列，并在移动设备上堆叠显示列，但到目前为止我还无法做到，我尝试采用相同的方法，将列添加到浮动的

div

s中，然后清除小设备上的浮动，如：

<table>
    <tr>
        <td>
            <div class="column" style="float: left; width: 300px;">
                <!-- content -->
            </div>
            <div class="column" style="float: left; width: 300px;">
                <!-- content -->
            </div>
        </td>
    <tr>
</table>

它几乎在任何地方看起来都很好，但从css上看，它们不会并排出现

我试着用表格单元格代替div，比如：

<table>
    <tr>
        <td width="300" align="left" class="column">
            <!-- content -->
        </td>
        <td width="300" align="left" class="column">
            <!-- content -->
        </td>
    <tr>
</table>

保持相同的CSS类，但即使它解决了桌面客户端中的问题，但在iOS设备上它看起来是并排的（好像

display:block

没有应用到

td

s）

---

有人有主意吗？

你应该改用表格而不是div。查看以下HTML标记以供参考。此外，本指南将非常有用：

---

谢谢，我没有想到我使用了两个

td

元素

<table>
    <tr>
        <td width="300" align="left" class="column">
            <!-- content -->
        </td>
        <td width="300" align="left" class="column">
            <!-- content -->
        </td>
    <tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" width="600">
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0" width="300" align="left">
                <!-- content -->
            </table>
            <table cellpadding="0" cellspacing="0" border="0" width="300" align="left">
                <!-- content -->
            </table>
        </td>
    <tr>
</table>