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