图片下面有空白(3px左右)
问题说明:
<div id= "announcell "> <img src= "images/index_02.jpg " width= "8 " height= "333 "> </div> 这里写在一行就没有空白了
<div id= "announcelm1 "> <img src= "images/index_03.jpg " width= "240 " height= "43 "> </div> 但是这下面的就不行了
快救我吧,期待中....
<!--网站公告与政务咨讯 -->
<div id= "announce ">
<div id= "announcel ">
<div id= "announcell "> <img src= "images/index_02.jpg " width= "8 " height= "333 "> </div>
<div id= "announcelm ">
<div id= "announcelm1 "> <img src= "images/index_03.jpg " width= "240 " height= "43 "> </div>
<div id= "announcelm2 "> d </div>
<div id= "announcelm3 "> e </div>
<div id= "announcelm4 "> c </div>
</div>
<div id= "announcelr "> <img src= "images/index_04.jpg " width= "14 " height= "333 "> </div>
</div>
<div id= "announcer "> d </div>
</div>
/*网站公告与政务咨讯 */
#announce{ width:1002px; height:333px; margin:0 auto;}
#announcel { width:262px; float:left; text-align:left;}
#announcell { float:left; width:8px; height:333px;}
#announcelr { float:left; width:14px; height:333px;}
#announcelm { float:left; width:240px; height:333px; text-align:center; vertical-align:text-top; background-color:#F3ACF6;}
#announcelm1 { float:left; width:240px; height:43px;}
#announcelm2 { float:left; width:240px; height:160px; background-color:#FFFFFF;}
#announcelm3 { float:left; width:240px; height:88px;}
#announcelm4 { float:left; width:240px; height:42px;}
#announcer { float:left; width:740px; height:333px; text-align:left;}
------解决方案--------------------css中加这个:
img {
display:block;
}
还有,代码不是搂主这么写的,你这样写等于是个“table”者,干脆用回table算了……
这样试试:
<div id= "announce ">
<div>
<h2> </h2>
<p> d </p>
<p> e </p>
<p> c </p>
</div>
</div>
<style type= "text/css ">
* {
padding:0;
margin:0;
}
#announce {
background:url(images/index_02.jpg) 0 0 no-repeat;
padding-left:8px;
height:333px;
}
#announce div {
background:url(images/index_04.jpg) right 0 no-repeat;
padding-right:14px;
}
#announce h2 {
background:url(images/index_03.jpg) no-repeat;
width:240px;
height:43px;
}
</style>
虽然不一定就严格符合web标准,但是代码简洁多了,表现也和结果分离