两个div其间有空隙

两个div之间有空隙

CSS code

 <style type="text/css">        body        {            font-size: 12px;            color: #333;        }        #picBox        {            width: 206px;            height: 205px;            margin: 0px auto;            overflow: hidden;            position: relative;        }        #picBox ul#show_pic        {            margin: 0;            padding: 0;            list-style: none;            height: 205px;            width: 305px;            position: absolute;        }        #picBox ul#show_pic li        {            float: left;            margin: 0;            padding: 0;            height: 205px;        }        #picBox ul#show_pic li img        {            display: block;        }        #icon_num        {            position: absolute;            bottom: 0px;            right: 10px;        }        #icon_num li        {            float: left;            width: 15px;            height: 15px;            list-style: none;            background-color: Black;            color: #39F;            text-align: center;            cursor: pointer;            padding: 0;            margin: 0;            margin-right: 5px;        }        #icon_num li:hover, #icon_num li.active        {            color: #fff;        }        #picBox_top        {            width: 206px;            height: 205px;            margin: 0px auto;            position: relative;            overflow: hidden;        }        #picBox_top ul#show_pic_top        {            margin: 0;            padding: 0;            list-style: none;            height: 205px;            width: 206px;            position: absolute;        }        #picBox_top ul#show_pic_top li        {            float: left;            margin: 0;            padding: 0;            height: 205px;        }        #picBox_top ul#show_pic_top li img        {            display: block;        }        #icon_num_top        {            position: absolute;            bottom: 0px;            right: 10px;        }        #icon_num_top li        {            float: left;            width: 15px;            height: 15px;            list-style: none;            color: #39F;            text-align: center;            cursor: pointer;            padding: 0;            margin: 0;            margin-right: 5px;        }        #icon_num_top li:hover, #icon_num_top li.active        {            color: #fff;        }    </style>

HTML code

    <div>        <div id="picBox">            <ul id="show_pic" style="left: 0;">                <li><a href="images/full/001.jpg">                    <img src="images/full/001.jpg" alt="Image 001" /></a></li>                <li><a href="images/full/002.jpg">                    <img src="images/full/002.jpg" alt="Image 002" /></a></li>                <li><a href="images/full/003.jpg">                    <img src="images/full/003.jpg" alt="Image 003" /></a></li>                <li><a href="images/full/004.jpg">                    <img src="images/full/004.jpg" alt="Image 004" /></a></li>                <li><a href="images/full/005.jpg">                    <img src="images/full/005.jpg" alt="Image 005" /></a></li>            </ul>        </div>        <div id="num">            <ul id="icon_num">                <li class="active">1</li>                <li>2</li>                <li>3</li>                <li>4</li>                <li>5</li>            </ul>        </div>    </div> 
 

picBox和num这两个div上下之间有很多空隙 如何让num这个div紧靠在picBox这个div的下面

[解决办法]
你这里绝对定位了
#icon_num
{
position: absolute;
bottom: 0px;
right: 10px;
}


<style type="text/css">
body
{
font-size: 12px;
color: #333;
}
#picBox
{
width: 206px;
height: 120px;
margin: 0px auto;
overflow: hidden;
position: relative;
}
#picBox ul#show_pic
{
margin: 0;
padding: 0;
list-style: none;
height: 120px;
width: 3050px;
position: absolute;
}
#picBox ul#show_pic li
{
float: left;
margin: 0;
padding: 0;
height: 120px;
}
#picBox ul#show_pic li img
{
display: block;
}
#icon_num
{
width: 206px;
margin: 0px auto;
overflow: hidden;
position: relative;
}
#icon_num li
{
float: left;
width: 15px;
height: 15px;
list-style: none;
background-color: Black;
color: #39F;
text-align: center;
cursor: pointer;
padding: 0;
margin: 0;
margin-right: 5px;
}
#icon_num li:hover, #icon_num li.active
{
color: #fff;
}
</style>

查看更多 下一篇