Question

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

理想情况下，图标是正确的：0;或浮动到右边。虽然我们知道在电子邮件中要避免浮动。

模拟：http://i.stack.imgur.com/9O1j1.png

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

<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>

Answer 1

您可以将包含社交按钮的<td>对齐到右侧。

大多数电子邮件客户端都支持此功能，包括许多移动客户端。我通过Email On 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>

如何正确对齐响应电子邮件的图像与左侧空白区域

1 个答案: