html - 在手机的 html 电子邮件中翻转交替列

Question

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

具有交替图像的桌面 View

什么是受益人灰色框上方需要带毕业帽的女士照片的移动 View 。

<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在 parent <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>以这样的方式，第一列中的图像，交换每一行中列的顺序可以通过添加 dir=rtl 来实现。给家长<td> .