我试图找出如何在一个表行中有3列,但根据是移动还是桌面,隐藏第一列还是最后一列。我最初的想法是在底部添加另一个TD,并通过css和媒体查询隐藏一个TD,但这似乎不是很有效。
具有交替图像的桌面视图
html - 翻转HTML电子邮件中的移动交替列-LMLPHP
移动视图,需要与一个受惠者灰色盒子上方戴着毕业帽的女士合影。
html - 翻转HTML电子邮件中的移动交替列-LMLPHP

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

最佳答案

有一种方法可以做到这一点,而不依赖媒体查询,如果你想在所有电子邮件客户端的总覆盖率。使用dir属性和max-width,可以指定哪个<td>首先出现在wide上。
首先以可移动的第一种方式排列每个表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>,则可以通过向父dir=rtl添加<td>来交换每行中列的顺序。

10-05 20:26
查看更多