HTML EMAIL - 反轉全寬表格列

Question

我有這個電子郵件模板，我想將移動模式下的布局從上圖更改為如下所示：

現在的問題是，有些行有倒置的 tds，我想倒置它們，作為電子郵件 html 模板，鑒於 Outlook 的大量使用和現代 css 屬性不受支持的功能，我無法使用有用的顯示 FLEX。

我怎樣才能在多行的 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>上添加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/