首页 > 解决方案 > HTML 电子邮件签名列向右浮动

问题描述

创建电子邮件签名。

目前它在浏览器中看起来与预期的一样。

但是,当我将其复制到电子邮件客户端作为签名时,右侧列“#float-me-right”不会向右浮动。有人可以建议最佳做法,将其固定在桌子的右侧。

最亲切的问候

<table class="footer-table" border="0" cellpadding="0" style="max-width: 1900px; font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; font-size: 15px">
  <tbody>
    <tr>
      <td class="col">
        <img width="280" border="0" src="http://stevenmacdonald.co.uk/wp-content/uploads/2020/02/team-chris-500x400-1.gif" alt="Hello">
        <p style="margin:0"><a name="_MailAutoSig"><strong style="font-size: 21px;font-weight: 100;line-height:28px; color: #728bfc; margin-left: 12px;">Name</strong></a></p>
        <p style="margin: 0; font-size: 15px; line-height: 24px; font-weight: 100; margin-left: 12px;">Job Title</p>
        <p style="font-size: 13px; line-height: 18px; margin-left: 12px; margin-bottom: 0;">07123456789
          <br><span style="color: #000 !important;">test@test.com</span></p>
      </td>

      <td id="float-me-right" class="col" style="text-align: right;">
        <table class="inner-table" style="width: 320px; text-align: right; margin-top: 131px; text-align: left; display: inline-block;">
          <tbody>
            <!-- top row right -->
            <tr>
              <td>
              </td>
              <td>
                <span><img border="0" style="padding-top: 0px; padding-bottom: 10px; display:inline-block; width:120px;" src="http://stevenmacdonald.co.uk/wp-content/uploads/2020/02/Screenshot-2020-02-18-at-16.57.16.png" alt="Hello"></span>
              </td>
            </tr>
            <!-- bottom row right -->
            <tr>
              <td>
                <p style="font-size: 13px; line-height: 18px; margin: 0;">Address Top Line<br> addresss line one<br> addresss line two<br> addresss line three<br>
              </td>
              <td>
                <span style="display: inline-block; font-size: 13px; line-height: 18px; padding-top: 18px;">0151 012 0192<br>
                info@mywebsite.co.uk<br>
                <a href="mywebsite.co.uk" target="_blank" style="color: #728bfc;">mywebsite.co.uk</a></span>
              </td>
            </tr>
          </tbody>

        </table>
      </td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/stevenmacdonald180/5L8myxnv/9/

标签: htmlcss

解决方案


而不是使用float:right尝试使用表属性align="right"。这将使您的表格正确对齐。检查codepen链接。

Email Signature


推荐阅读