Html 如何将响应电子邮件的图像右对齐到左侧空白处

我的目标是右对齐电子邮件标题中的4个社交图标。模型和代码如下。我遇到的主要问题是图标左侧只有空白。具有宽度的空td以小屏幕大小将图像集推到可视区域之外

理想情况下，图标应该是正确的：0；或者向右转。虽然我们知道在电子邮件中要避免浮动

模型：

下面的代码将社交图标直接堆叠在表左侧的徽标下方

<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
    <td>

        <!-- HEADER CONTENT -->
        <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
            <tr>
                <td align="left" style="display:inline-block">
                    <img src="logo.png" alt="Logo" style="display:block; padding-top:32px; font:300 16px/24px Arial, sans-serif; color:#000;" width="286"/>
                </td>
            </tr>
            <tr>
                <td style="display:inline-block; padding-top:4px;  padding-bottom:14px;">
                    <a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-fb.png" alt="FB" width="18" /></a>
                    <a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-blog.png" alt="blog" width="18" /></a>
                    <a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-twitter.png" alt="twitter" width="18" /></a>
                    <a href="#" style="display:inline-block; text-decoration:none;"><img src="social-linkedIn.png" alt="linkedIn" width="18" /></a>
                </td>  
            </tr>
        </table>


    </td>
</tr>

---

您只需将包含社交按钮的

向右对齐即可

大多数电子邮件客户端（包括许多移动客户端）都支持此功能。我在Acid上通过电子邮件运行了这段代码，它在除Thunderbird之外的所有主要桌面客户端以及除Android和iOS Gmail应用程序之外的所有移动客户端中都受支持

<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td><!-- HEADER CONTENT -->

      <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
        <tr>
          <td align="left" style="display:inline-block"><img src="logo.png" alt="Logo" style="display:block; padding-top:32px; font:300 16px/24px Arial, sans-serif; color:#000;" width="286"/></td>
        </tr>
        <tr>
          <td align="right" style="display:inline-block; padding-top:4px;  padding-bottom:14px;"><a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-fb.png" alt="FB" width="18" /></a> <a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-blog.png" alt="blog" width="18" /></a> <a href="#" style="display:inline-block; text-decoration:none; padding-right:10px;"><img src="social-twitter.png" alt="twitter" width="18" /></a> <a href="#" style="display:inline-block; text-decoration:none;"><img src="social-linkedIn.png" alt="linkedIn" width="18" /></a></td>
        </tr>
      </table></td>
  </tr>
</table>

width=“600”-有响应吗<代码>？谢谢@dfsq。成功了。您是否正在用html和body标记包装表？你发布的代码没有使用，但在这些标签中，我得到的结果与之前相同。我通常避免使用body标签，因为一些电子邮件客户端会将其剥离，并在其中放置自己的带有属性的body标签，或将其转换为div标签，如Gmail。