Question

我正在使用表来布局某个将被送到电子邮件生成器的html文件。

<table>
  <tbody>
    <tr class="that-row">
      <td style="font-size: 0;background: #fff; position: relative;" align="center">
        <img src="img_url" style="width:100%;margin: 0 0 20px;position: absolute;top: 0;left: 0; height: 100%; min-height: 100%;">
        <span style="width: 100%;line-height: 34px;font-family: Arial Regular, sans-serif;font-size: 22px;color: #474747;margin: 10px 0 0 0;">
         Lorem IpsumW
        </span>
      </td>
    </tr>
    <tr class="this-row">
      <td style="padding: 0 25px;font-size: 28px;line-height: 37px;color: #474747;text-align: center; position: relative;" align="center">
        <span style="display: block;text-align: center;color: #474747;font-size: 34px;font-weight: bold;font-family: Arial; margin: 0 0 21px;">LOREM IPSUM</span>
        <span style="text-align: left;margin: 0 auto;display: block;width: 83%;">lorem ipsum 123456</span>
      </td>
    </tr>
  </tbody>
</table>

我希望类“this-row”的内容位于“that-row”类的下方。目前的情况是“this-row”的内容位于“that-row”之上，因为“that-row”没有高度。

感谢任何帮助。感谢

Answer 1

我不建议重新排序表行，因为它可以更改表的默认行为，并且有更好的方法来处理您要完成的任务。

话虽如此，试试flexbox。（未经测试）

<table>
  <tbody style="display:flex; flex-direction:column;">
    <tr style="order:2;">
       <td>1</td>
    </tr>
    <tr style="order:1;">
       <td>2</td>
    </tr>
  </tbody>
</table>

如何在绝对位置后定位兄弟元素？

1 个答案: