如何在 HTML 电子邮件中对齐 3 张响应图像？

Question

我有一封 HTML 电子邮件。我想在宽度超过 900 像素的大屏幕上并排放置 3 张图像，如下所示：

在移动设备上 phone 我希望像这样将方框放在彼此下方：

我想在 Gmail 应用程序和网络浏览器中实现这一点。不幸的是，我不能使用媒体查询，因为它们在 Gmail 应用程序中不受支持（根据我的经验，它们也不适用于 Gmail 网络浏览器）：https://www.campaignmonitor.com/css/media-queries/media/

我该怎么做？我的基本想法是像这样使用 table：

<table width="100%" align="center"  border="0" cellpadding="0" cellspacing="0" >
    <tr>
        <td align="center">
            <table class="my-table-size" border="0" cellpadding="0" cellspacing="0" >
                <tr>
                    <td align="center">
                        <img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" >
                        <img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" class="middleimage">
                        <img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" >
                     </td>
                 </tr>
             </table>
        </td>
    </tr>
</table>

但似乎“内联块”样式被忽略了，因为图像总是在彼此下方 - 即使有足够的 space 将它们并排放置。

我可以给 table 固定宽度，例如

<table class="my-table-size" width="900px" >

但它在移动设备上也将始终具有 900 像素的宽度。所以它会在任何设备上看起来像这样：

我怎样才能让它工作？

Answer 1

您正在寻找的问题通常可以通过使用“流体混合”技术来解决。为此，我打算从 https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 那里窃取，但这是一种非常常见的技术（周围也有其他技术）。

基本代码如下：

<div class="three-col" style="font-size:0;text-align:center;">
    <!--[if mso]>
    <table role="presentation" width="100%" style="text-align:center;">
    <tr>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            [content goes here]
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            [content goes here]
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            [content goes here]
        </div>
    </div>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

现在，您仍然可以使用媒体查询来增强那些支持嵌入式的电子邮件客户端的体验 <style>s。

所以你可以添加这个，作为一个可能的例子，在 <head>:

<style type="text/css">
    @media screen and (max-width: 350px) {
        .three-col .column {
            max-width: 100% !important;
        }
    }
    @media screen and (min-width: 351px) and (max-width: 460px) {
        .three-col .column {
            max-width: 50% !important;
        }
    }
    @media screen and (min-width: 461px) {
        .three-col .column {
            max-width: 33.3% !important;
        }
        .two-col .column {
            max-width: 50% !important;
        }
        .sidebar .small {
            max-width: 16% !important;
        }
        .sidebar .large {
            max-width: 84% !important;
        }
    }
</style>

如何在 HTML 电子邮件中对齐 3 张响应图像？

How to align 3 images responsive in HTML email?

css

html-email