HTML EMAIL - 反转全宽 table 列

Question

我有这个电子邮件模板，我想将移动模式下的布局从上图更改为如下所示：

现在的问题是，有些行有反转的 tds，我想反转它们，作为电子邮件 html 模板，鉴于 Outlook 的广泛使用和现代 css 属性不受支持的功能。

如何实现第二张多行图像中的内容？我现在只有这个：

我试过使用 dir="rtl" & dir="ltr" 但它不起作用

<tr mc:hideable>
                <td>
                  <table width="100%" class="templateColumns ">
                    <tr>
                      <td align="right" valign="top" width="50%" class="templateColumnContainer">
                        <table class="textColumn" width="100%">
                          <tr>
                            <td align="center" valign="top" style="padding-top:10px;padding-bottom:0px;" class="textColumnContent" mc:label="left_column_text_1" mc:edit="left_column_text_1">
                              <h2>Column</h2>
                              <p>Lorem ipsum dolor sit amet.</p>
                            </td>
                          </tr>
                        </table>
                      </td>
                      <td align="center" valign="top" width="50%" class="templateColumnContainer">
                        <table border="0" cellspacing="0" width="100%">
                          <tr>
                            <td>
                              <img src="https://via.placeholder.com/282x200" style="max-width:282px" class="columnImage" mc:label="right_column_image_1" mc:edit="right_column_image_1" mc:allowdesigner="" alt="282x200">
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <!-- END IMAGE COLUMN RIGHT BLOCK // -->
              <!-- BEGIN IMAGE COLUMN LEFT BLOCK // -->
              <tr mc:hideable>
                <td>
                  <table width="100%" class="templateColumns">
                    <tr>
                      <td align="center" valign="top" width="50%" class="templateColumnContainer">
                        <table border="0" cellspacing="0" width="100%">
                          <tr>
                            <td>
                              <img src="https://via.placeholder.com/282x200" class="templateImage" mc:label="left_column_image_2" mc:edit="left_column_image_2" alt="282x200">
                            </td>
                          </tr>
                        </table>
                      </td>
                      <td align="center" valign="top" width="50%" class="templateColumnContainer">
                        <table class="textColumn3" width="100%">
                          <tr>
                            <td align="center" valign="top" style="padding-top:10px;padding-bottom:0px;" class="textColumnContent" mc:label="right_column_text_2" mc:edit="right_column_text_2">
                              <h2>Column</h2>
                              <p>Lorem ipsum dolor sit amet.</p>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>

工作示例：

https://jsfiddle.net/d560c3u8/

Answer 1

您可以使用 CSS direction 属性执行此操作。但诀窍是让您的 HTML 代码代表您希望事物在移动设备上的显示顺序。因此，如果您首先想要图像，其次是文本，那么您的 HTML 需要像这样：

<table>
    <tr>
        <td><img src="…" alt="" /></td>
        <td>Text</td>
    </tr>
</table>
<table>
    <tr>
        <td><img src="…" alt="" /></td>
        <td>Text</td>
    </tr>
</table>

然后，如果你想在桌面上反转第一个table的显示，你需要在那个table上添加direction:rtl，然后添加direction:ltr在 table 的 <td> 上，以确保您的内容不受影响。你最终会得到这样的结果：

<table style="direction:rtl;">
    <tr>
        <td style="direction:ltr;"><img src="…" alt="" /></td>
        <td style="direction:ltr;">Text</td>
    </tr>
</table>
<table>
    <tr>
        <td><img src="…" alt="" /></td>
        <td>Text</td>
    </tr>
</table>

然后媒体查询中的样式可以将 display:block 应用于 <td>，从而消除 direction 属性.

的效果

<style>
@media only screen and (max-width: 480px) {
    td {
        display:block !important;
        width:100% !important;
    }
}
</style>

这是一个更新的 JSFiddle，它基于您的应用此解决方案：https://jsfiddle.net/3s8L7h2n/5/

HTML EMAIL - 反转全宽 table 列

HTML EMAIL - Invert full width table column

html

css

email

templates

html-email