Подпись электронной почты HTML - изображения, перемещающиеся в строку ниже

Я очень плохо знаком с HTML и пытаюсь создать подпись HTML, мне удалось заставить ее работать в ряде почтовых клиентов и смотреть, как я хочу, но иногда, например, на iPhone и в Hotmail/Outlook значки социальных сетей во второй ячейке располагаются под логотипом компании. Есть ли что-то, что я пропустил или могу улучшить, чтобы они оставались в линии с остальной частью подписи?

Ниже приведен текущий код - возможно, в коде есть вещи, которые либо не должны присутствовать, либо кажутся немного странными, но это лучшее, чего мне удалось достичь.

    <div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;">
  <tbody>
<tr>
<td>
  <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/></td>        
  <td valign="bottom"><a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">    
</td>
<div style="clear:both"></div>

Большое спасибо

Источник

3 ответа

Решение

Редактировать обновленный код и лакмус. Попробуй это. кодовая ручка Выглядит одинаково во всех лакмусовых тестах.

редактировать обновленный HTML

<div id="sig" style="min-width:400px;min-height:130px;max-width:600px;max-height:150px;padding:5px 0 0 5px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td rowspan="3">
    <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg" width="454" height="117" alt="Lozi Designs" border="0" style="display:block;"/>
  </td>
  <td valign="middle">
    <a href="http://www.facebook.com/lozidesigns"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" border="0" style="display:block;"/></a>
  </td>
</tr>
<tr>
  <td valign="middle">
    <a href="http://www.instagram.com/lozi_designs"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" border="0" style="display:block;"></a>
  </td>
</tr>
<tr>
  <td valign="middle">
    <a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" border="0" style="display:block;"></a>
  </td>
</tr>
</table>
</div>

Не забудьте проверить ваш HTML-код. Вы использовали элементы таблицы, но не окружили их <table> В теге было указано более одного альтернативного текста для одних и тех же изображений, и некоторые из ваших цитат не были закрыты (не приведенный ниже атрибут ширины в качестве примера).

Открыто: ширина = "122 высота =" 122 "

Закрыто: ширина = "122" высота = "122"

Я убрал некоторые стили в изображении (вам не нужно было плавать логотип) и удалил cellpadding / cellspacing, установив их в ноль в элементе таблицы. Я перепроверил Litmus и иконки социальных сетей появляются так, как я считаю, они должны.

Источник

Если вы хотите оставить изображения в одной строке, вы должны использовать display : inline вместо display : block

 <div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;">
  <tbody>
<tr>
<td>
  <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/></td>        
  <td valign="bottom"><a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">    
</td>
<div style="clear:both"></div>
Источник

Попробуй это:

<table>
<tr><td>
<div style="float:left;"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg" style="width:100%;max-width:600px;"></div></td><td>
<div width="38px" style="display:inline;">
<a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="100%" style="max-width:38px;"></a><br>
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="100%" style="max-width:38px;"></a><br>
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="100%" style="max-width:38px;"></a></div></td></tr></table>

Он должен быть полностью адаптивным для любого почтового клиента или мобильного устройства.

Источник
Другие вопросы по тегам