在移动设备上让表格彼此相邻更改顺序

Question

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

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

所描述的概念有效，但在 outlook 中无效，因为它忽略了 display:inline。

（由于我的组件在宽度 >750px 的客户端中占据了 space 的一半，在宽度小于 750px 的客户端中占据了 space 的 100%，因此我需要在桌面上使用 rtl，在移动设备上使用 ltr .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>

Answer 1

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

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

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

祝你好运。

Answer 2

已解决

我希望这对以后遇到同样问题的人有所帮助。所以使用 direction:rtl; 的一般想法确实是正确的想法。

方向黑客让我能够将顺序更改为图像第一，文本第二，这也是移动视图应该的方式。

然后将两个表格本身设置回 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>

在移动设备上让表格彼此相邻更改顺序

Make tables next to each other change order on mobile

html

email

outlook

templates

inline