关于CSS相对定位后问题，求大神解答~
如图，由于图片的位置加了相对定位，另到下面的DIV布局被覆盖了，求懂的大神进T^T
我试过给添加了相对定位的添加高度，是可以解决问题，但问题如果内容少了的话就会空一大片空白出来，有没有办法可以解决T^T我想深灰色的框会显示在图片的下面，在线等。
付CSS代码
#mian{position:relative; z-index:998;}
.box{padding:10px 0 0 10px; float:left; margin-top:50px; margin-bottom:20px;}
.tu{padding:1px;}
.tu img{width:350px; height:auto;}
/*深灰色框*/
.fy{width:1000px; height:80px; background:#333; margin:0 auto;}
慕姐0693551浏览 2150回答 3
3回答
-
一毛钱
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> <title>javascript</title> <style type="text/css"> body{font-size:12px;} #mian{position:relative; z-index:998;} .box{padding:10px 0 0 10px; float:left; margin-top:50px; margin-bottom:20px;} .tu{padding:1px;} .tu img{width:350px; height:auto;} /*深灰色框*/ .fy{width:1000px; height:80px; background:#333; margin:0 auto;} </style> </head> <body> <div id="mian"> <div class="box"> <div class="tu"> <img src="images/ceshi (1).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (2).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (3).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (4).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (5).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (6).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (7).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (8).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (9).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (10).jpg" /> </div> </div> </div> <div style="clear:both;"></div>//这块清除一下上面的float <div class="fy"> </div> </body> </html> -
慕姐0693551
#mian{position:relative; z-index:998;} .box{padding:10px 0 0 10px; float:left; margin-top:50px; margin-bottom:20px;} .tu{padding:1px;} .tu img{width:350px; height:auto;} /*深灰色框*/ .fy{width:1000px; height:80px; background:#333; margin:0 auto;} -
慕姐0693551
<div id="mian"> <div class="box"> <div class="tu"> <img src="images/ceshi (1).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (2).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (3).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (4).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (5).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (6).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (7).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (8).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (9).jpg" /> </div> </div> <div class="box"> <div class="tu"> <img src="images/ceshi (10).jpg" /> </div> </div> </div> <div class="fy"> </div>
随时随地看视频慕课网APP
Html/CSS