Question

Gmail不支持媒体查询CSS规则，因此我使用内联css创建了HTML电子邮件，现在我已陷入桌面视图。我不能使用float：left，因为hotmail会将其从电子邮件正文中删除，也不会使用媒体查询。

我的要求附在截图中

我的当前代码是

＆＃13;

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;">
<tr>
    <td>
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td valign=top width="70%" style="min-width: 320px; display: inline-block; background-color: yellow;height:auto; height:200px;">
                    Main Content
                </td>
                <td valign=top width="29%" style="min-width: 150px; max-width:320px; display: inline-block; ">
                    <!-- SIDE BAR CONTENT -->
                    <table align=left cellspacing="0" cellpadding="0" border="0" style="background-color: blue; width: 100px;">
                        <tr>
                            <td width="*" style="max-width: 110px; background-color: red;  height:100px;">
                                MY PHOTO
                            </td>
                        </tr>
                    </table>
                    <table align=left width="*" cellspacing="0" cellpadding="0" border="0" style="background-color: green; width: 220px;">
                        <tr>
                            <td width="*" style="max-width: 110px; background-color: green;  height:100px;">
                                MY STATS TEXT
                            </td>
                        </tr>
                    </table>
                    <!-- SIDE BAR CONTENT END -->
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

＆＃13;

Answer 1

您可以尝试将两个浮标中的每一个都包含在内。在内联块div中，但是在桌面视图中不可能有两个堆叠块，以便在没有媒体查询的移动视图中将它们彼此相邻。

最佳解决方案是使用媒体查询并为Gmail设置后备布局（例如使用内嵌块div）。

使用内联块div进行演示：

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;">
<tr>
    <td>
        <div style="width: 380px; display: inline-block;">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td valign=top width="70%" style="min-width: 320px; display: inline-block; background-color: yellow;height:auto; height:200px;">
                        Main Content
                    </td>
                </tr>
            </table>
        </div>
        <div style="width: 220px; display: inline-block;">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td valign=top width="29%" style="min-width: 150px; max-width:320px; display: inline-block; ">
                        <!-- SIDE BAR CONTENT -->
                        <table align=left cellspacing="0" cellpadding="0" border="0" style="background-color: blue; width: 100px;">
                            <tr>
                                <td width="*" style="max-width: 110px; background-color: red;  height:100px;">
                                    MY PHOTO
                                </td>
                            </tr>
                        </table>
                        <table align=left width="*" cellspacing="0" cellpadding="0" border="0" style="background-color: green; width: 220px;">
                            <tr>
                                <td width="*" style="max-width: 110px; background-color: green;  height:100px;">
                                    MY STATS TEXT
                                </td>
                            </tr>
                        </table>
                        <!-- SIDE BAR CONTENT END -->
                    </td>
                </tr>
            </table>
    </td>
</tr>
</table>

有关设计自适应电子邮件HTML的更多信息：https://www.campaignmonitor.com/blog/email-marketing/2014/07/creating-a-centred-responsive-design-without-media-queries/

没有媒体查询的响应式电子邮件HTML

1 个答案: