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

Question

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

带有交替图像的桌面视图

什么是受益人灰色框上方需要带毕业帽的女士照片的手机视图

<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

E-Mail-Clients 他们的 CSS.

有点棘手

您可以按照您希望它们在移动设备上的方式订购它们，然后添加以下内容用于桌面：

position: relative;
left: -50%;

剩余代码取决于您如何在 two-column 和 one-column 布局之间切换。

大多数现代邮件程序都支持 flexbox。使用 flexbox，您可以使用 order 属性或通过将方向设置为 row-reverse.

来 re-order 元素

Answer 2

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

首先以 mobile-first 方式布置每个 table 2 列行：第一个 <td> 中的图像和第二个中的文本。由于源顺序，当这些图层堆叠时，图像将始终位于文本的顶部。一旦列宽超过它们的 max-width，它们将在不需要媒体查询的情况下堆叠。

这解决了移动端问题，但是如何让一些图片出现在桌面端的右栏中呢？这就是 dir 的用武之地。在父 <td> 处添加 dir=rtl 会导致包含元素反向运行。所以最后一列最先出现。

这是一个基本示例：

<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> 第一列中的图像，可以通过向父级添加 dir=rtl 来交换每行中列的顺序<td>.

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

Flip Alternating columns in html email for mobile

html

css

html-email

responsive-design