Question

我有3部分图像，我必须将其显示为单个图像，并且还希望使用HTML标记包含指向3部分图像的链接。

我创建了包含1列和2行的表格，然后将图像插入到表格的3部分中。但它在上部和下部图像（第1和第2行）之间有一些空格。如何解决此问题并创建一个没有任何空格的单个图形，还需要包含第三个图像的链接。

迫切需要帮助

<table style="width: 660px; border-collapse: collapse; height: 237px;" border="0" cellspacing="0" cellpadding="0" sizset="0" sizcache="15">
<tbody sizset="0" sizcache="15">
<tr>
<td><img style="margin: 0px; border: 0px currentColor;" src="uploaded/Online_Newsletters/Nav/masthead-ball_top.jpg" width="665" height="197"></td>
</tr>
<tr>
<td><img style="margin: 0px; border: 0px currentColor;" src="uploaded/Online_Newsletters/Nav/ball_bottom_left.jpg" width="579" height="37"><img style="margin: 0px; border: 0px currentColor;" src="uploaded/Online_Newsletters/Nav/ball_bottom_right.jpg" width="86" height="37"></td>
</tr>
</tbody>
</table>

我使用了上面的代码，但图像之间仍然有空格。在我的公司网站上使用finalsite进行管理，所以我使用的是finalsite编辑器。

Answer 1

在表格标记中使用cellpadding和cellspacing：

<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">

并将第3张图片用作链接，只需使用

即可

<a href="http://www.example.com"><img src="yourimage.jpg" border="0" style="float:left;" /></a>

编辑：

将style="float:left;"添加到您的img标记。

http://jsfiddle.net/H628X/1/

Answer 2

除了@ Wolv3r答案，如果你没有

img {
   display:block;
}

内联或使用样式标记，这会导致gmail / yahoo出现问题。

电子邮件发送方法的好html来源：

http://24ways.org/2009/rock-solid-html-emails/

使用HTML标记将单独的图像合并为单个图像

2 个答案: