在Mobile中设置内容堆叠顺序(HTML电子邮件)
我目前正在创建一封电子邮件，但我真的很难设置某些内容在移动设备上显示时的堆栈顺序。
例如，我的一个内容块在左边有一个文本块，然后在右边有一个图像。在另一个内容块中，图像位于左侧，文本块位于右侧。但是，在这两个内容块中，文本块和图像在移动设备中将变成全宽，将它们放在单行上。我想要的是文本首先显示，然后是图像第二，我希望有这两个部分。
有没有人能推荐一些能做到这一点的CSS呢？人们建议使用Z-Index，但我知道这对我不起作用。除非我用错了！
不幸的是，我无法分享任何截图或代码，因为这不是我的电子邮件，属于一个客户。
回答 2
Stack Overflow用户
发布于 2020-07-14 02:16:35
您可以尝试通过组合固定宽度的表格和align来反转表格堆叠。align属性将它们定位在桌面上(文本左，图像右)，然后为移动视图设置width:100% !important将强制它们按照html (移动图像)的顺序堆叠。
<table width="600" class="full-width">
<tr>
<td>
<table width="280" align="right" class="full-width">
<tr>
<td>image</td>
</tr>
</table>
<table width="280" align="left" class="full-width">
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>如果您使用的是th或td，并且想要更改堆叠顺序。您可以在单元格display: table-header-group (移动到表格顶部-您的图像)和display: table-footer-group (移动到表格底部-您的文本)上使用这些display值。
<table>
<tr>
<th class="display-table-footer">text</th>
<th class="display-table-header">image</th>
</tr>
</table>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>https://stackoverflow.com/questions/62874265
复制相似问题
腾讯云开发者
