在中国杨树网设计杨树图片时遇到一个问题,正好在ajaxbbs.net上看到作者提到,抄过来收藏,这个问题是这样的,无论怎么设置边框,在图片的下方都会有一空隙,我的是div包一个IMG
在无忧上看到一个网友问这个问题,偶也比较感兴趣,楼主代码是这样写的:
<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" />
</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,这就比较完美的解决了这个问题
本文创作以及使用本文遵守创作共用协议(Creative Commons Attribution 3.0)-署名
原文地址:http://blog.cike.org/2007b/209.shtml

arrow
arrow
    全站熱搜

    Felix 發表在 痞客邦 留言(0) 人氣()