我正在尝试创建一个电子邮件模板，如下所示。我用过表。除了图像没有显示在正确的位置之外，我什么都能做。图像应显示在容器的中间和顶部（参见屏幕 1），但我无法完成。我试图提供negative margin给container，但 gmail 和其他邮件服务忽略了负边距。
到目前为止，这是我能够完成的事情。
代码在此处。有人可以帮忙吗？
问问题
3823 次
3 回答
6
更新的答案：
您不能在 html 电子邮件中使用负边距。为了模仿这一点，有两种方法可以做到这一点，嵌套表方式和更复杂的行跨度方式：
<!-- 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">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</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">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</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">
</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">
</td>
</tr>
<tr>
<td width="200" height="40">
</td>
<td width="200" height="40">
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</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>
于 2014-03-13T14:29:07.697 回答
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;"> </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;"> </b>
</td>
查看结果 - http://jsfiddle.net/562ux。
我没有在电子邮件客户端中对此进行过测试，但正如@Kheema Pandey 所说，您应该尝试使用内联样式。
于 2014-03-13T14:13:17.240 回答
-1
inline style在创建时事通讯时使用它是一种很好的做法。Outlook也不支持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>
于 2014-03-13T13:43:12.690 回答