在无忧上看到一个问这个问题,偶也比较感兴趣,楼主代码是这样写的:
<div style = "width : 240px; height : 315px; line-height:100%;">
<img src = "1.gif" border = "0" height = "56" width = "240" />
<img src = "1.gif" border = "0" height = "56" width = "240" />
<img src = "1.gif" border = "0" height = "56" width = "240" />
<img src = "1.gif" border = "0" height = "56" width = "240" />
<img src = "1.gif" border = "0" height = "56" width = "240" />
</div>
这样看到的效果就是每个图片之间有小段空白。
有朋友贴出解决代码如下:
<div style = "width : 240px; height : 315px; line-height:100%;">
<img src = "1.gif" border = "0" height = "56" width = "240" /><img src = "1.gif" border = "0" height = "56" width = "240" /><img src = "1.gif" border = "0" height = "56" width = "240" /><img src = "1.gif" border = "0" height = "56" width = "240" /><img src = "1.gif" border = "0" height = "56" width = "240" /></div> 即删除每个<img>标记之间的换行符,将所有标记连接在一起,这样问题解决了,但降低了代码的可读性,显然不是一种完美的解决办法。最后
hbjswj大哥给出了一种比较好的办法.全部代码如下:
<style>
img {float:left;} /*注意这个地方*/
</style>
<div style = "width : 240px; height : 315px; line-height:100%;">
<img src = "1.gif" border = "0" height = "56" width = "240" />
<img src = "1.gif" border = "0" height = "56" width = "240" />
<img src = "1.gif" border = "0" height = "56" width = "240" />
<img src = "1.gif" border = "0" height = "56" width = "240" />
<img src = "1.gif" border = "0" height = "56" width = "240" />
</div>
为每个img增加了float:left,这就比较完美的解决了这个问题