Question

我正在尝试在大屏幕上并排显示列并在移动设备上叠加显示但是我已经无法到目前为止，我尝试使用相同的方法ZURB used on their templates他们添加到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 apparently strips floats之外，几乎所有地方看起来都很好，所以它们并没有并排看待。

我尝试做的事情是使用表格单元格而不是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）< / p>

有人有想法吗？

Answer 1

你应该切换到使用表而不是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>

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

1 个答案: