如何在HTML Email中实现左右元素同行布局？

HTML邮件对CSS属性支持有限，position:absolute、flex布局这类现代属性大多不兼容，最稳妥的方案是用表格布局——这是邮件开发的行业标准。以下是调整后的代码，完美实现需求：

<table class="footer-container" style="width:100%; background:pink; position:fixed; bottom:0; border-collapse:collapse;">
  <tr>
    <!-- 左侧图标列 -->
    <td style="padding:30px 24px; vertical-align:middle;">
      <img 
        src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png"
        alt="Twitter图标"
        width="94"
        style="display:block;"
      />
    </td>
    <!-- 右侧链接列 -->
    <td style="padding:40px 30px; text-align:right; vertical-align:middle;">
      <a style="margin-left:16px;">1</a>
      <a style="margin-left:16px;">2</a>
      <a style="margin-left:16px;">3</a>
    </td>
  </tr>
</table>

关键说明： #

• 用<table>替代<div>做容器：所有主流邮件客户端（包括Outlook）都完美支持表格布局，是邮件开发的核心方案。
• vertical-align:middle：确保图标和链接在垂直方向居中对齐，避免上下错位。
• 给图片加display:block：防止图片下方出现默认空白间隙。
• 全内联样式：HTML邮件不支持外部样式表或内部<style>标签（部分客户端会过滤），所有样式必须写在元素的style属性里。
• 关于position:fixed：部分移动端邮件客户端不支持固定定位，若需兼容所有客户端，可去掉该属性改为常规底部布局。

内容的提问来源于stack exchange，提问作者Morton