logo标签列表

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

htmlresponsive-designhtml-emailemail-client
8

我正在尝试在大屏幕上并排显示两列内容，在移动设备上则需要将它们堆叠在一起，但是目前我还无法实现。我尝试了遵循ZURB在其模板中使用的方法，即给两个div添加浮动属性，并在小设备上清除浮动：

<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>

在我的<style>标签中：
@media screen and (max-device-width: 600px) {
    .column {
        width: auto !important;
        float: none !important;
        display: block !important;
    }
}

这段代码在大多数情况下看起来都很好，但是据说Outlook.com会完全忽略 css 中的浮动属性，导致它们不能在 Outlook.com 上并排显示。

我尝试的解决方案是改用表格单元格（table cell）代替 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设备上看起来是并排的（好像td没有应用display:block）。有人有什么想法吗？
1个回答
11

您应该将 div 替换为使用表格。请参考以下 HTML 标记。此外，这个指南会非常有帮助：http://www.campaignmonitor.com/guides/mobile/

<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>
谢谢，我没有想到我使用了两个td元素。 - Javier Villanueva
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接