如何在 HTML 电子邮件中对齐 3 个响应式图像？答案

【问题标题】：How to align 3 images responsive in HTML email?如何在 HTML 电子邮件中对齐 3 个响应式图像？
【发布时间】：2022-01-19 21:57:54
【问题描述】：

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

在手机上，我希望像这样在彼此下方的方框中显示：

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

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

<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>

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

我可以给表格一个固定的宽度，比如

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

但它在移动设备上也总是有 900px 的宽度。所以它会在任何设备上看起来像这样：

我怎样才能让它工作？

【问题讨论】：

不谈论 gmail，只是一般的电子邮件布局。我们需要像您所做的那样为所有客户使用嵌套表（可悲的是前景，最差和更需要）。忘记更大的屏幕。根据我的经验，900 像素太大（我使用 600 像素）。按照您已经完成的方式进行布局（列）。你不应该指望人们在全宽浏览器中打开电子邮件，特别是现在大多数电子邮件都是通过手机打开的。

标签： css html-email

【解决方案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>

【讨论】：