8

我试图让列在大屏幕上并排显示，并在移动设备上堆叠显示，但到目前为止我一直无法做到，我尝试遵循ZURB在他们添加的模板上使用的相同方法to divs 浮动，然后清除小型设备上的浮动，例如：

<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 中剥离了浮动，因此它们不会并排在那里。

我尝试做的事情是使用表格单元格而不是divs，例如：

<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没有应用于tds）

有人有想法吗？

4

1 回答 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>
于 2013-06-03T13:57:17.697 回答