翻转移动 html 电子邮件中的交替列

Question

我试图弄清楚如何在表行中包含 3 列，但隐藏第一列或最后一列，具体取决于它是移动设备还是桌面设备。我最初的想法是在底部添加另一个 TD，并通过 css 和媒体查询隐藏一个 TD，但这似乎效果不太好。

具有交替图像的桌面视图

移动视图，需要在“什么是受益人”灰色框上方带有戴毕业帽的女士的照片。

<table border="0" cellpadding="0" cellspacing="0" width="100%">
       <tr align="center" valign="middle">
          <td align="center" width="50%" class="column" valign="top" style="text-align:left; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#44464a; line-height:1.4; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;">    <img class="person" src="c29229/c29229_4seasons_photos_2.jpg" alt="photo of people" style="width:300; height:auto; border:0 none; display:block;" />    </td>
          <td align="center" valign="middle" width="50%" class="column" style="text-align:center; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#ffffff; line-height:1.4; padding-top:0px; padding-right:30px; padding-bottom:0px; padding-left:30px; background-color: #ab811d;">
             <h2 style="text-align:center; font-weight: normal !important; font-size: 24px; color:#ffffff; margin-bottom: 20px !important;">
                <div class="spacer" style="padding-top: 40px; display:none;">&nbsp;</div>
                Complete your beneficiary designation
             </h2>
             <p style="margin-bottom:0px;"><a href="#" style="color:#ffffff; text-decoration:underline;">Vea esta correo electr&oacute;nico en&nbsp;espa&ntilde;ol</a></p>
          </td>
       </tr>
    </table>

Answer 1

如果您希望完全覆盖所有电子邮件客户端，有一种方法可以在不依赖媒体查询的情况下实现此目的。dir将属性与 一起使用max-width，您可以指定哪个<td>首先出现在宽屏上。

首先以移动优先的方式布置每个表的 2 列行：第一个是图像<td>，第二个是文本。由于源顺序的原因，当这些图层堆叠时，图像将始终位于文本的顶部。一旦列宽超过它们的宽度max-width，它们就会堆叠起来而无需媒体查询。

这解决了移动设备的问题，但是如何让一些图像出现在桌面上的右栏中呢？这就是dir发挥作用的地方。dir=rtl在父级添加<td>会导致包含元素反向运行。所以最后一列首先出现。

这是一个基本示例：

<tr>
    <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
    <td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
        <!--[if mso]>
        <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
        <tr>
        <td align="center" valign="top" width="600">
        <![endif]-->
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
            <tr>
                <td align="center" valign="top" style="font-size:0; padding: 0;">
                    <!--[if mso]>
                    <table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
                    <tr>
                    <td align="left" valign="top" width="300">
                    <![endif]-->
                    <div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tr>
                                <td dir="ltr" style="padding: 0 10px 10px 10px;">
                                    <img src="http://placehold.it/200" width="300" height="" border="0" alt="" style="width: 100%; max-width: 300px; height: auto;">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso]>
                    </td>
                    <td align="left" valign="top" width="300">
                    <![endif]-->
                    <div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tr>
                                <td dir="ltr"> <!-- Don't forget to switch dir to ltr here, or else text runs in reverse -->
                                Text Goes Here
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </td>
            </tr>
        </table>
        <!--[if mso]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>

如果您以这样的方式布局每个图像，其中第一列中的图像，则可以通过向父级<tr>添加 a 来实现交换每行中的列的顺序。dir=rtl<td>