在移动设备上制作并排的表格更改订单答案

【问题标题】：Make tables next to each other change order on mobile在移动设备上制作并排的表格更改订单
【发布时间】：2020-05-14 04:27:46
【问题描述】：

我的任务是为 HTML 电子邮件创建模板。我们的设计师（上帝保佑他们）有一个好主意，即创建一个片段，在左侧，我们有一些文本，在右侧有一个图像，大致如下：

在移动设备上，他们希望文本位于图像之后，但我该如何实现呢？我建议使用 2 个标记，但客户不希望这样。我的第二个想法是使用 CSS 属性direction：将其设置为 rtl 并在移动设备上将其切换回 ltr，因此更改顺序。但这失败了，因为彼此相邻的 2 个元素是表格。 Outlook 会忽略表格上的display:inline，因此要使它们彼此相邻，我必须使用align="left"。但是左对齐有点覆盖我的direction: rtl 属性。有人知道吗？

所描述的概念有效，但在 Outlook 中不起作用，表格显示在彼此下方，因为它忽略了display:inline。

（由于我的组件在客户端> 750px宽度和100％的客户端空间中占用了一半空间direction:rtl不会改变顺序元素相互堆叠，仅彼此相邻）

https://codepen.io/hergi/pen/YzPbKzX?editors=1100

<style type="text/css">      
  .wrapper {
    direction: rtl;
  }

  @media (max-width:749px) {
  .wrapper {
    direction: ltr !important;
  }

  }

  @media (min-width:750px) {

  .wrapper {
    direction: rtl !important;
  }
  }

</style>
<div class="wrapper" style="direction: rtl;">
  <table style="display: inline-block;">
    <tr>
      <td>
  <img src="https://kde.org/stuff/clipart/logo/kde-logo-white-blue-rounded-128x128.png" />        
      </td>
    </tr>
  </table>
  <table style="display: inline-block;">
    <tr>
      <td>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Google-Cloud-Storage-Logo.svg/128px-Google-Cloud-Storage-Logo.svg.png" />   
      </td>
    </tr>
  </table>
</div>

【问题讨论】：

标签： html email templates outlook inline

【解决方案1】：

我有一个类似的问题，我必须以相反的顺序堆叠。我也遇到了direction: rtl; 的问题。我的解决方案是跳过 css 并将 rtl 直接应用于表格。

<table>
  <tr>
    <td dir="ltr">A</td>
    <td dir="rtl">B</td>
  </tr>
</table>

显然，您不能在<td> 级别应用对齐方式，因为这样会坚持下去。但是如果你添加一个@media查询，你可以从桌面改变移动的对齐方式，方向不会干扰。

祝你好运。

【讨论】：

【解决方案2】：

已解决

我希望这对以后遇到同样问题的人有所帮助。所以使用direction:rtl; 的总体思路确实是正确的。

带有方向的 hack 使我能够将顺序更改为先显示图像，然后再显示文本，这也是移动视图应该采用的方式。

然后将这两个表本身设置回dir="ltr"和style="direction:ltr;"，这样它们的内容就会以从左到右的西方风格呈现。

要在outlook中将表格设置为一行（使它们内联），请添加html属性align="right"。

<table class="wrapper">
  <tr>
    <td dir="rtl" style="direction:rtl;>

      <table align="right" dir="ltr" style="direction:ltr;" class="panel">
        ...appearing right on desktop and on top in mobile
      </table>

      <table align="right" dir="ltr" style="direction:ltr;" class="panel">
        ...appearing left on desktop and bottom on mobile
      </table>

    </td>
  </tr>
</table>

【讨论】：