HTML Электронная почта Подпись Колонка Поплавок справа - PullRequest
1 голос
/ 21 февраля 2020

Создание подписи электронной почты.

В настоящее время это выглядит так, как и ожидалось в браузере.

Однако, когда я копирую это в почтовый клиент в качестве подписи, правый столбец "# 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/

Ответы [ 2 ]

0 голосов
/ 21 февраля 2020

Поскольку вы используете таблицы, лучше использовать свойства таблицы в качестве первого приоритета вместо CSS. Попробуйте использовать align = "right" в элементе таблицы, который вы хотите выровнять по правому краю.

align="right" 

Дайте мне знать, если это работает.

0 голосов
/ 21 февраля 2020

Вместо использования float:right попробуйте использовать свойство таблицы align="right". Это сделает вашу таблицу ровной. Проверьте кодовую ссылку.

Email Signature

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...