在移动设备中设置内容堆叠顺序（HTML 电子邮件）

Question

我目前正在构建电子邮件，但我真的很难设置某些内容在移动设备中显示时的堆栈顺序。

例如，我的一个内容块在左侧有一个文本块，然后在右侧有一个图像。在另一个内容块中，我在左侧有一个图像，在右侧有一个文本块。但是，在这两个内容块中，文本块和图像将在移动设备中变成全宽，将它们放在单行上。我想要的是首先显示文本，然后显示图像，我希望这两个部分都有。

任何人都可以建议任何可以做到这一点的 CSS 吗？人们建议使用 Z-Index，但我知道这对我不起作用。除非我用错了！

很遗憾，我无法分享任何屏​​幕截图或代码，因为它不是我的电子邮件并且属于客户。

Answer 1

您可以通过组合固定宽度的表格和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>

Answer 2

您可以使用要反转其堆叠顺序的表中的 dir="rtl" 属性来反转内容的默认堆叠顺序。这种技术在其他地方都有记录 here。还有一个广泛使用的模板来演示这种技术here。下面包含使用此技术的表格的代码 sn-p - 有关包含 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>