对齐签名中彼此相邻的图像

Question

我正在为 Gmail 创建一个 HTML 签名，但在图像对齐方面存在一些问题。在 DW 和 Chrome 中预览代码给了我一些看起来像第一张图片的东西。但是，当我将其复制到 Gmail 中时，它看起来像这样：

代码如下：

<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:sarahhughes@spear-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>

Answer 1

尝试使用表格使所有内容正确对齐：

<table>
    <tr>
        <td colspan=3><a href="mailto:sarahhughes@spear-fish.com"><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>

对齐签名中彼此相邻的图像

Aligning images next to eachother in a Signature

html

css

signature