Выравнивание изображений рядом с eachother в подписи

Я делаю HTML-подпись для Gmail и имею некоторые проблемы с выравниванием изображений. Предварительный просмотр кода в DW и Chrome дает мне то, что похоже на первое изображение. Однако, когда я копирую это в Gmail это выглядит примерно так:Выравнивание изображений рядом с eachother в подписи

comparison between Gmail and Chrome

Вот код:

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>psdtowebPSD2648.psd</title> 
    <link href="psdtowebPSD2648/styles.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <a href="mailto:[email protected]ear-fish.com"> 
     <div id="SarahHughes"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/SarahHughes.png"></div></a> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <div id="BusinessDevelopmentM"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/BusinessDevelopmentM.png"></div> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <div id="spearfishlogov04"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/spearfishlogov04.png"></div> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <div id="divider"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/divider.png"></div> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <a href="http://www.spear-fish.com/"> 
     <div id="SpearFishcom"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/SpearFishcom.png"></div></a> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <a href="https://twitter.com/spear_fish"> 
     <div id="twitter"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/twitter.png"></div></a> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <a href="https://www.linkedin.com/pub/dan-hooton/3/910/689"> 
     <div id="linkedin"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/linkedin.png"></div></a> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <div id="divider"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/divider.png"></div> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <a href="https://goo.gl/En7Cn9"> 
     <div id="ASpearfishRadleyHous"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/ASpearfishRadleyHous.png"></div></a> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <div id="P443330555501M44"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/P443330555501M44.png"></div> 
     <td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">&nbsp;</td> 
     <a href="https://plus.google.com/u/0/100772955751868660892/posts"> 
     <div id="G"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/G.png"></div></a></div>

источник

2015-06-08 TheGamingGeek

Ooops начало сокращаться , Ниже приведено сравнение с тем, как он выглядит в DW/Chrome, а затем в Gmail. http://gyazo.com/ac9f87897b5949323d1c364825574754 – TheGamingGeek

Вы начинаете использовать TD и Divs взаимозаменяемо, почему бы не придерживаться одного вместо случайного смешивания их? Также отформатируйте свой HTML немного лучше. – Rimble

@TomKriek Да, я сказал, что я действительно не очень осведомлен. Не могли бы вы помочь? – TheGamingGeek

Попробуйте использовать таблицы, чтобы сделать все правильно выровненную:

<table> 
    <tr> 
     <td colspan=3><a href="mailto:[email protected]"><img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/SarahHughes.png"></a> 

     </td> 
    </tr> 
    <tr> 
     <td colspan=3> 
      <img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/BusinessDevelopmentM.png"> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/spearfishlogov04.png"> 
     </td> 
     <td> 
      <img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/divider.png"> 
     </td> 
     <td> 
      <img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/SpearFishcom.png"> 
     </td> 
    </tr> 
    <tr> 
     <td colspan=3><a href="https://goo.gl/En7Cn9"> 
        <img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/ASpearfishRadleyHous.png"></a> 

     </td> 
    </tr> 
    <tr> 
     <td colspan=3> 
      <img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/P443330555501M44.png"> 
     </td> 
    </tr> 
    <tr> 
     <td colspan=3><a href="https://twitter.com/spear_fish"> 
     <img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/twitter.png"></a> 
<a href="https://www.linkedin.com/pub/dan-hooton/3/910/689"> 
       <img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/linkedin.png"></a> 
<a href="https://plus.google.com/u/0/100772955751868660892/posts"> 
     <img src="http://thegaminggeek.co.uk/wp-content/uploads/2015/06/G.png"></a> 

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

источник

2015-06-08 17:44:26

Большое вам спасибо, очень цените это! – TheGamingGeek

Выравнивание изображений рядом с eachother в подписи

ответ

Смежные вопросы