在 html 邮箱的左侧和右侧制作多个元素很热门吗

发布于02月20日

它应该支持html email，所以我不能使用justify-content和align-items.

我试着用position: absolute代表<img />，但对html邮箱不起作用？

我是不是要把推特图标放在左边，和1-2-3放在同一条线上？

    <div
      class="footer-container"
      style="
      position: relative;
      background: pink;
      position: fixed;
      bottom: 0;
      width: 100%;"
    >
      <!-- position is not working on html email -->
      <div
        class="image-container"
        style="position: absolute; top: 30px; left: 24px"
      >
        <img 
          src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png"
          alt="test"
          width="94"
        />
      </div>
      <div
        class="centered"
        style="padding-top: 40px; padding-bottom: 40px; padding-right: 30px; text-align:right;"
      >
        <a>1</a>
        <a>2</a>
        <a>3</a>
    </div>
</div>

推荐答案

在邮箱模板中，您只有有限支持，因此，您可以使用过时的或在语义上不正确的技术来处理普通的HTML文件.

在这种情况下，您应该使用表格进行布局.您可以使用:style="width: 0; white-space: nowrap;"将表格单元格缩小到其最小内容

<table width="100%">
  <tr>
    <td>
      <img src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png" alt="test" width="94">
    </td>
    <td style="width: 0; white-space: nowrap;">
      <a>1</a>
    </td>
    <td style="width: 0; white-space: nowrap;">
      <a>2</a>
    </td>
    <td style="width: 0; white-space: nowrap;">
      <a>3</a>
    </td>
  </tr>
</table>