HTML EMAIL - 反转全宽表格列

Question

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

现在的问题是，有些行已经反转了 tds，我想反转它们，作为一个电子邮件 html 模板，我不能使用有用的显示 FLEX，因为 Outlook 的大量使用和现代 css 属性的不受支持的功能.

我怎样才能在多行的 seocond 图像中实现它？ 我现在只有这个：

我尝试过使用 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>

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

<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>s，从而使direction 属性的效果无效。

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

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