Question

**在浏览器上渲染以下内容时，请帮我删除图片之间的空白区域 - 在我的情况下是FireFox **

    <body>
        <form id="form1" runat="server">
        <div>
            <table style="border:0px;margin:0px;float:left; width:864px">
            <tr>
    	    <td style="width:809px">
    		    <table style="margin:0px; border:0px; clear: both; border-collapse: collapse; width:848px; height:120px">
    			    <tr><td style="margin:0px; border:0px; background:url(images/qualhisttop.jpg); width:560px; height:124px; background-repeat:no-repeat;"></td></tr>
                </table>
            </td>
            </tr>
        </table>
    <table style="border:0px;margin:0px; clear:both; width:864px">
        <tr style="margin:0px;">
            <!----------------------------------------------------------------------------------------------------->
            <!--                     B E G I N     N A V I G A T I O N                                           -->
            <!----------------------------------------------------------------------------------------------------->
            <td style="border:0px; margin:0px; vertical-align:top; float:left; width:130px; height:532px">
          	    <img src="images/tp_collagebasedrill.jpg" style="width:130px; height:78px; border:0px;margin:0px;" alt=""/>
                <img src="images/meta_swooshbottom.gif" width="109" height="140" alt="" />
          	</td>
            </tr>
        </table>
        
        </div>
        </form>
    </body>

Answer 1

好的，所以我提供了一个可以帮助你的例子。

  <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>remove the white space between my images</title>
<style type="text/css">
.wrapper{
    width: 1200px;
    margin: 0 auto;
}

#image-1{
    float: left;
}

#image-1 img{
    width: 600px;
}

#image-2{
    float: left;
}

#image-2 img{
    width: 600px;
}

</style>
</head>

<body>
<div class="wrapper">
    <div id="image-1"><img src="lostsouls.jpg" alt=""></div>
    <div id="image-2"><img src="lostsouls.jpg" alt=""></div>
</div>
</body>
</html>

Answer 2

所以如果你想要堆叠它们，那么它们就是块级元素，它们就是div。以下是基于前面示例的方法。

  <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>remove the white space between my stacked images</title>
<style type="text/css">
.wrapper{
    width: 1200px;
    margin: 0 auto;
}

#image-1{
    border: thin solid #003333;
    height: 200px;  
}

#image-1 img{
    width: 600px;
    height: 200px;
}

#image-2{
    height: 200px;
}

#image-2 img{
    width: 600px;
    height: 200px;

}

</style>
</head>

<body>
<div class="wrapper">
    <div id="image-1"><img src="lostsouls.jpg" alt=""></div>
    <div id="image-2"><img src="lostsouls.jpg" alt=""></div>
</div>
</body>
</html>

只需确保将图像-1和图像2 div的高度设置为与图像相同的大小

Answer 3

我提供了另一个代码示例，该示例在之前的帖子中应该适合您。试试看，看看它是否有效。图像之间空间的原因是您必须将图像的高度设置为与图像所在的容器或div相同的高度。因此，如果图像高400像素，那么您必须将div的高度设置为400px。我希望这会有所帮助。

图像之间的空间

3 个答案: