Question

我负责为HTML电子邮件创建模板。我们的设计师（上帝保佑他们）非常想创建一个片段，其中左侧是一些文本，右侧是图像，大致像这样：

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

所描述的概念行之有效，但在Outlook中却不能用，因为表忽略了display:inline，因为它们在表的下方显示。

（由于我的组件在宽度大于750px的客户端中占据一半的空间，而在宽度小于750px的客户端中占据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

也许尝试flexbox。

您可以使用flexbox摆脱“表”。

https://codepen.io/1019/pen/mdyYbzM

<div class="flex-container">
    <div class="your-text">
        <!-- Here you write the text you want -->
    </div>
    <div class="your-image">
         <!-- Here you add the image you want -->
    </div>
</div>

.flex-container {
    display: flex;
}
@media (max-width:749px) {
    .flex-container {
        flex-direction: column-reverse;
        flex-wrap: wrap;
     }
}

@media (min-width:750px) {
    .flex-container {
        direction: row;
    }
}

Answer 2

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

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

很显然，您无法在<td>级别应用对齐方式，因为那样会持续下去。但是，如果添加@media查询，则可以从桌面更改移动设备的对齐方式，并且方向不会发生冲突。

祝你好运。

Answer 3

已解决

我希望这将对将来遇到相同问题的任何人有所帮助。因此，使用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>

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

3 个答案: