HTMLEMAIL-反轉全寬表格列

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

現在的問題是，有些行有倒置的 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/

uj5u.com熱心網友回復：

您可以使用 CSSdirection屬性執行此操作。但訣竅是讓您的 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在該表格上添加，然后在該表格direction:ltr的<td>s 上添加以確保您的內容不受影響。你最終會得到這樣的結果：

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

標籤：html css 电子邮件 模板 html-email

上一篇：我如何為這個鉆石影像設定影片，使其看起來像3d鉆石向下旋轉？

下一篇：未檢測到xpath跨度