在没有媒体查询的情况下创建基于自适应表的浮动列电子邮件答案

【问题标题】：Creating Adaptive Table Based Floating Column Email without Media Query在没有媒体查询的情况下创建基于自适应表的浮动列电子邮件
【发布时间】：2014-02-24 10:40:59
【问题描述】：

不幸的是，我用来发送电子邮件的程序不允许@media 查询，也不允许上述代码顶部的 .css 列表。这是有问题的，因为我正在构建一个基于浮动列的电子邮件模板。我希望在平板电脑或台式机上查看时这两列彼此相邻，但在移动设备上查看时将列表放在内容面板下方。

这是我所拥有的基础：

<div style="width: 100%; max-width: 650px; margin-left: auto; margin-right: auto;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1" style="width: 100%;">
--banner image here--
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;">
<tbody>
<tr>
<td align="left" valign="top" width="320px;" style="padding-left: 10px; padding-right: 10px;">
--content goes here--
</td>
<td align="left" valign="top" width="180px;" style="padding-left: 10px; padding-right: 10px;">
--list of links--
</td>
</tr>
</tbody>
</table>
</div>

【问题讨论】：

标签： html-email adaptive-design

【解决方案1】：

这是可行的。如果没有媒体查询，您将仅限于参与的程度。如果您的列宽度相等，这将很有效。我不确定您的设计如何，但如果没有媒体查询，制作偶数列将是一项挑战。这里有一些粗略的 HTML 来帮助你。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
    </head>

    <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="100%" align="center" valign="top">       

                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 650px;">
                    <tr>
                        <td width="650">

                            <table cellpadding="0" cellspacing="0">

                                    <tr>
                                        <td colspan="1" style="width: 100%;"> --banner image here-- </td>
                                    </tr>

                            </table>
                            <table align="left" width="320">

                                    <tr>
                                        <td align="left" valign="top" width="320" bgcolor="#00CC99" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td>
                                    </tr>

                            </table>
                            <table align="left" width="180">

                                    <tr>
                                        <td align="left" valign="top" width="180" bgcolor="#99CC33" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td>
                                    </tr>

                            </table>

                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>

【讨论】：

谢谢达里尔，这有帮助！