在Mobile中设置内容堆叠顺序(HTML电子邮件)
在Mobile中设置内容堆叠顺序(HTML电子邮件)
提问于 2020-07-13 18:49:45
我目前正在创建一封电子邮件，但我真的很难设置某些内容在移动设备上显示时的堆栈顺序。
例如，我的一个内容块在左边有一个文本块，然后在右边有一个图像。在另一个内容块中，图像位于左侧，文本块位于右侧。但是，在这两个内容块中，文本块和图像在移动设备中将变成全宽，将它们放在单行上。我想要的是文本首先显示，然后是图像第二，我希望有这两个部分。
有没有人能推荐一些能做到这一点的CSS呢？人们建议使用Z-Index，但我知道这对我不起作用。除非我用错了！
不幸的是，我无法分享任何截图或代码，因为这不是我的电子邮件，属于一个客户。
Stack Overflow用户
发布于 2020-08-03 20:10:22
您可以使用要反转其堆叠顺序的表中的dir="rtl“属性来反转内容的默认堆叠顺序。除了其他地方，here中还记录了这种技术。还有一个广泛使用的模板演示了这种技术here。下面包含了使用此技术的表的代码片段-有关包括CSS的完整示例，请参阅上面Cerberus模板的链接。注意: HTML电子邮件设备支持一直在变化，因此建议在发送之前在电子邮件测试服务中测试此解决方案，例如email on Acid或Litmus。
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: auto;" class="email-container">
<!-- Thumbnail Right, Text Left : BEGIN -->
<tr>
<td dir="rtl" width="100%" style="padding: 10px; background-color: #ffffff;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- Column : BEGIN -->
<th width="33.33%" class="stack-column-center">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;">
<img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="center-on-narrow" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
</td>
</tr>
</table>
</th>
<!-- Column : END -->
<!-- Column : BEGIN -->
<th width="66.66%" class="stack-column-center">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow">
<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Class aptent taciti sociosqu</h2>
<p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
<tr>
<td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
</table>
</th>
<!-- Column : END -->
</tr>
</table>
</td>
</tr>
<!-- Thumbnail Right, Text Left : END -->
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62874265
复制相关文章
相似问题
腾讯云开发者
