使用HTML标记将单独的图像组合成单个图像

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

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

需要帮助的迫切

<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>

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

来源

2012-07-02 user1487320

这将帮助，如果你可以发布你到目前为止的代码 - 最好到http://jsfiddle.net/ - 这样我们就可以看到它。您可能想尝试使用CSS将图像设置为“display：block”，但是很难从您的问题中看出原因。 –

http://jsfiddle.net/wLA3T/1/-代码 – user1487320

@ PaulD.Waite的链接在近20K的代表处，你应该知道这不是一个答案，而是一个评论。 – casperOne

使用的cellpadding和CELLSPACING在表标签：

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

，并使用第三图像作为链接只是使用

<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/

来源

2012-07-02 12:37:14 WolvDev

您可能还需要查看border-collapse：collapse; css属性，它将折叠表格中每个单元格周围的边框。 –

或者我们设置了border =“0”，这样我们就没有任何边框可以阻止将图像的各个部分显示为一个:) – WolvDev

并不总是有效，我会尽量在后面挖掘一个例子，可能只是某些浏览器，但将cellpadding cellspacing和border设置为0并不足以在所有情况下摆脱单元格之间的间隙。有时候也需要边界崩溃。 –

随着@ Wolv3r回答，如果你没有

img { 
    display:block; 
}

内联或使用样式标记，这将导致在Gmail /雅虎的问题。

来源为良好的HTML通过电子邮件发送方法：

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

来源

2014-03-03 16:07:13 Zork

使用HTML标记将单独的图像组合成单个图像

回答

相关问题