今天做练习遇到一个问题,分享一下解决办法:
在编写html中的一个放置图片时,代码如下:
<div class="nrtp"> <div class="nrtpa"> <a href="">点卡兑换现已开启</a> </div> <div class="nrtpt"> <img src="imgs/1.jpg" alt=""> </div> </div>
css代码:
.nrtp{ width: 286px; text-align: center; margin: 0px 7px; border: 2px solid #422d24; } .nrtpa{ background: url(../imgs/bg_nav.jpg); border-bottom: 2px solid #422d24; } .nrtpa a{ color: #f8b700; line-height: 50px; text-decoration: none; } .nrtp img{ width: 286px; height: 146px; }
结果图片一直不能铺满包含他的div。
我自己的解决方式是将图片转换为块元素,成功解决的。
.nrtp img{
width: 286px;
height: 146px;
display:block;
}
最后总结一下关于解决相似问题的办法:
a元素或者div元素下有一个匿名文本,这个文本外有一个匿名行级盒子,它有的默认vertical-align是baseline的,而且往往因为上文line-height的影响,使它有个line-height,从而使其有了高度,因为baseline对齐的原因,这个匿名盒子就会下沉,往下撑开一些距离,所以把a撑高了。
解决办法一:是消除掉匿名盒子的高度,也就是给a设置line-height:0或font-size:0;
解决办法二:是给两者vertical-align:top,让其top对齐,而不是baseline对齐
解决办法三:是给img以display:block,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒。img是行内元素,默认display: inline; 它与文本的默认行为类似,下边缘是与基线对齐,而不是紧贴容器下边缘。将displayp设置为block即可消除上面说的几个像素的差别。