我试图找出如何在一个表行中有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;"> </div>
Complete your beneficiary designation
</h2>
<p style="margin-bottom:0px;"><a href="#" style="color:#ffffff; text-decoration:underline;">Vea esta correo electrónico en españ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>
来交换每行中列的顺序。