如何使用任何对齐或浮动来交换 2 个块的位置

Question

我想使用一些电子邮件通讯技巧来交换两个块的位置。我想要第一个街区在右边，第二个街区在左边。

试过这些：

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre><code><table cellpadding="0" cellspacing="0" border="0" width="600">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0" width="300" align="right">
        content 1
      </table>
      <table cellpadding="0" cellspacing="0" border="0" width="300" align="left">
        content 2
      </table>
     </td>
   </tr>
</table>

<table>
  <tr>
    <td width="300" align="right" class="column">
      content 1
    </td>
    <td width="300" align="left" class="column">
      content 2
    </td>
  </tr>
</table>

Answer 1

在容器 table 上使用 dir="rtl"，在内部 tables 或 tds 上使用 dir="ltr"。这使得容器读取最后一个 table 作为开头并显示在左侧，但是当堆叠时，它仍然根据父级中 table 的顺序堆叠。

见下文：

<table dir="rtl" cellpadding="0" cellspacing="0" border="0" width="600">
  <tr>
    <td>
      <table dir="ltr" cellpadding="0" cellspacing="0" border="0" width="300" align="right">
        content 1
      </table>
      <table dir="ltr" cellpadding="0" cellspacing="0" border="0" width="300" align="left">
        content 2
      </table>
     </td>
   </tr>
</table>

<table dir="rtl">
  <tr>
    <td dir="ltr" width="300" align="right" class="column">
      content 1
    </td>
    <td dir="ltr" width="300" align="left" class="column">
      content 2
    </td>
  </tr>
</table>