如圖，由于圖片的位置加了相對定位，另到下面的DIV布局被覆蓋了，求懂的大神進(jìn)T^T我試過給添加了相對定位的添加高度，是可以解決問題，但問題如果內(nèi)容少了的話就會(huì)空一大片空白出來，有沒有辦法可以解決T^T我想深灰色的框會(huì)顯示在圖片的下面，在線等。付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;}
3 回答
一毛錢
TA貢獻(xiàn)156條經(jīng)驗(yàn) 獲得超57個(gè)贊
<!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
TA貢獻(xiàn)7條經(jīng)驗(yàn) 獲得超0個(gè)贊
#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
TA貢獻(xiàn)7條經(jīng)驗(yàn) 獲得超0個(gè)贊
<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>
添加回答
舉報(bào)
0/150
提交
取消