創建電子郵件團隊問題

Question

我正在嘗試創建類似以下的電子郵件模板。我用桌子。我能夠做一切事情，除了圖像不顯示在適當的位置。圖像應顯示在容器的中間和頂部（請參閱屏幕1），但我無法完成。我試圖提供negative margin到container，但Gmail和其他郵件服務都忽略了負邊距。

這就是我能accomplishd直到至今。

該代碼是本here。任何人都可以請幫忙嗎？

Answer 1

正如我所說的：

如果是我，我會做邊框與圖像的行。 - 亞歷 托馬斯23分鐘前

更改你頂行：

<td valign="bottom"> 
    <b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;">&nbsp;</b> 
</td> 
<td class="text-center" width="64"> 
    <img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png"> </td> 
<td valign="bottom"> 
    <b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;">&nbsp;</b> 
</td> 

檢查出來的結果 - http://jsfiddle.net/562ux。

我還沒有在電子郵件客戶端中測試過這個，但正如@Kheema Pandey所說，您應該嘗試使用內聯樣式。

Answer 2

在創建新聞簡報時使用inline style是個好習慣。前景也不支持margin negative屬性。

在你的情況下，圖像不會出現在中心，所以你可以在這裏使用內聯樣式'style =「text-align：center;」'。

<td style="text-align:center;"> 
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" /> 
</td> 

Answer 3

最後回答：

您不能在html電子郵件中使用負邊距。爲了模仿這個，有2種方式來做到這一點，嵌套表的方式和更復雜的行跨度方式：

<!-- The nested way --> 

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook --> 
    <tr> 
    <td width="200" height="80" bgcolor="#007700"> 
     <table width="100%" height="80" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td height="40" bgcolor="#FFFFFF">&nbsp; 
      </td> 
     </tr> 
     <tr> 
      <td height="40" bgcolor="#CCCCCC">&nbsp; 
      </td> 
     </tr> 
     </table> 
    </td> 
    <td width="100" height="80" bgcolor="#4444FF"> 
    <img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    <td width="200" height="80" bgcolor="#FFFFFF"> 
     <table width="100%" height="80" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td height="40" bgcolor="#FFFFFF">&nbsp; 
      </td> 
     </tr> 
     <tr> 
      <td height="40" bgcolor="#CCCCCC">&nbsp; 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
    <tr> 
    <td width="500" height="200" colspan="3">&nbsp; 
    </td> 
</tr> 
</table> 

<br><br> 

<!-- The fancy rowspan way --> 

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook --> 
    <tr> 
    <td width="200" height="40" bgcolor="#FFFFFF">&nbsp; 
    </td> 
    <td width="100" height="80" rowspan="2" bgcolor="#4444FF"> 
    <img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    <td width="200" height="40" bgcolor="#FFFFFF">&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="200" height="40">&nbsp; 
    </td> 
    <td width="200" height="40">&nbsp; 
    </td> 
    </tr> 
    <tr> 
    <td width="500" height="200" colspan="3">&nbsp; 
    </td> 
</tr> 
</table> 

---

原來的答覆：

對於基本定位：

平鋪，使用align="left|center|right"，垂直使用valign="top|middle|bottom"

以下是如何放置圖像中心頂部的表格：

的

<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td height="500" align="center" valign="top"> 
     <img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    </tr> 
</table>