在移动设备(HTML电子邮件)中设置内容堆叠顺序 [英] Setting a Content Stacking Order in Mobile (HTML Emails)

问题描述

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

I'm currently in the process of building an email, but I'm really struggling to set the stack order of certain content when it is displayed in mobile.

例如，我的一个内容块的左侧是一个文本块，右侧是一个图像.在另一个内容块中，我在左侧有一个图像，在右边有一个文本块.但是，在这两个内容块中，文本块和图像在移动设备中将变为全宽，从而将它们放在单行上.我想要的是首先显示文本，然后显示图像，并且我想在两个部分中都使用它.

For example, one of my content blocks has a block of text on the left and then an image on the right. In another content block, I have an image on the left and block of the text on the right. But, in both of these content blocks, the text block and image will become full width in mobile putting them on singular rows. What I would like to have is for the text to be displayed first and then the image second and I would like to have this for both sections.

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

Would anyone be able to suggest any CSS that would be able to do this? People have suggested Z-Index, but I know that doesn't work for me. Unless I've been using it wrong!

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

Unfortunately, I am unable to share any screenshots or code as it is not my email and belongs to a client.

推荐答案

您可以使用dir ="rtl"反转内容的默认堆叠顺序.要反转其堆叠顺序的表中的属性.除其他地方外，该技术在这里.在此处处，也有一个广泛使用的模板来演示此技术.下面包含使用此技术的表的代码段-有关包括CSS的完整示例，请参见上面的Cerberus模板的链接.注意:HTML电子邮件设备支持始终处于变化之中，因此建议在发送之前在电子邮件测试服务(例如，Acid on Acid或Litmus中的电子邮件测试服务)中对此解决方案进行测试.

You can reverse the default stacking order of content using the dir="rtl" property in the table whose stacking order you want to reverse. This technique is documented among other places here. There is also a widely-used template that demonstrates this technique here. A code snippet for a table using this technique is included below - for the complete sample including CSS see the link to the Cerberus template above. Note: HTML email device support is always in flux so it's recommended to test this solution in an email testing service such as Email on Acid or Litmus before sending.

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

这篇关于在移动设备(HTML电子邮件)中设置内容堆叠顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！