GMail App 中的响应式图像对齐

Question

尝试编写响应式电子邮件模板，GMail 应用程序不断让我陷入循环。

我有 3 列图像，我想将其中的一个显示在另一个之上 (align="center")。然而由于某种原因，当它通过 gmail 应用程序时，对齐方式变得很古怪（两个左对齐，有一些填充，一个右对齐）。

建议修复？

看起来像这样：!(https://drive.google.com/file/d/0B26Uw_LjUlM-LWNfWnZkR3VvVEU)。

代码如下：

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="wrap" style="border-collapse: collapse;background-color: #ffffff;">
                            <tr>
                                <td height="20">
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td class="padding2" style="padding: 0 20px;">
                                    <table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td> <img mc:edit="bottom-ad1" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="10" align="left" border="0" cellpadding="0" cellspacing="0" class="hide600" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td height="10">
                                                <br />
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td> <img mc:edit="bottom-ad2" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="180" align="right" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td> <img mc:edit="bottom-ad3" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td height="20">
                                    <br />
                                </td>
                            </tr>
                        </table>

还有 CSS：

@media only screen and (max-width: 599px) {
            table[class~=button][class~=b], table[class~=color-icon-s], table[class~=color-icon-m] { width:240px !important; max-width:240px !important; height:auto;}
            table[class~=color-icon-m], table[class~=color-icon-b], table[class~=color-icon-s] { float:none !important; margin:0 auto !important; }
            table[class~=mid3] { margin-bottom:30px !important; }
            td[class~=mid3] { margin-bottom:30px !important; }
            table[class~=hide600], td[class~=hide600] { display:none !important; }
}
@media only screen and (max-width: 439px) {
            td[class~=padding-2-440] { padding:0 20px !important; }
}
@media only screen and (max-width: 339px) {
            table[class~=wrap], table[class~=version] { width:100% !important; }
            }

Answer 1

Gmail 应用不支持媒体查询（来源：https://litmus.com/help/email-clients/media-query-support/）。因此，任何未内联的 CSS 都不会被渲染。

也就是说，Gmail 应用程序应该缩放视图以适应屏幕。我会在你的代码中改变两件事。

1. 避免为图像设置固定宽度。做类似<img src="path/here/" style="width:100%;max-width:180px" width="180" /> 的事情。
2. 为包含图像的<td> 设置宽度百分比。你可以试试<td style="width:33.3333%;">。

我希望这会有所帮助。

Answer 2

您必须将两个表的对齐值更改为 align="center"。这将导致表格在所有客户端中居中。然后在 head 部分的媒体查询中应用带有浮点数的“left”和“right”类，如下所示：

.left { float: left !important; } .right { float: right !important; }

由于 gmail 应用程序去除了头部的样式，因此该 css 不会在 gmail 中生效，并且它们将保持居中。然后你会遇到 align=centered Outlook 不支持浮动的问题。要再次右/左对齐，只需在两个居中和固定的表格之前和之后添加仅适用于 Outlook 的条件标签，如下所示：

<!--[if (gte mso 9)|(lte ie 8)]> <table align="right" valign="top" width="49%"> <tr> <td valign="top" style="border-collapse: collapse;"> <![endif]-->

// your markup here: <table width="49%" align="center" ...

<!--[if (gte mso 9)|(lte ie 8)]> </td> </tr> </table> <![endif]-->

在条件中为两个表设置左右对齐值，您将使其在 gmail 应用程序中居中，在 Outlook 中为左/右。

干杯