时间戳

首页 > 解决方案 > HTML EMAIL - 反转全宽表格列

html - HTML EMAIL - 反转全宽表格列

问题描述

在此处输入图像描述

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

在此处输入图像描述

现在的问题是，有些行已经反转了 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/

标签： htmlcssemailtemplateshtml-email

解决方案

您可以使用 CSSdirection属性执行此操作。但诀窍是让您的 HTML 代码代表您希望在移动设备上显示的内容的顺序。所以如果你想要你的图像首先和你的文本第二，那么你的 HTML 需要是这样的：

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

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

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

然后媒体查询中的样式可以应用于s，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/

推荐阅读