今天做练习遇到一个问题,分享一下解决办法:

在编写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即可消除上面说的几个像素的差别。

解决 div或者a标签的高度比里面的img高度多的 问题的更多相关文章

  1. 解决div里面img标签后面跟着空白符

    直接在div里面添加img标签有一个坑,img的高度会莫名添加几个像素的高度,查询之后才知道原来css2出现的问题. 引起这个问题原来是img标签默认基线引起的,vertical-align:base ...

  2. 解决IE6下a标签的onclick事件里的超链接不跳转问题

    今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location=url"> ...

  3. 外部div自适应内部标签的高度,设置最小高度、最大高度

    一.div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>.<ul>.<ol>或者文字等各种内容.造成外层的di ...

  4. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  5. CSS: 解决Div float后,父Div无法高度自适应的问题

    在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...

  6. 解决div嵌套时IE8和FF无法自适应高度

    解决div嵌套时IE8和FF无法自适应高度 还是做类似新浪评论回复的时候,将回复的DIV嵌套在一个DIV中,然后点击回复的时候显示子DIV,这是父DIV的高度是会变化的,于是我将父DIV的高度设置为h ...

  7. HTML 的超链接 a 标签中如何设置其宽度和高度?

    HTML 的超链接 a 标签中如何设置其宽度和高度? 在DIV CSS布局中,html 中 a 超链接标签,直接对其设置宽度和高度不能生效,设置宽度和高度也不起作用,这里为大家分享如何实现 a 标签宽 ...

  8. 解决div里面img的缝隙问题~

    解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...

  9. 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题

    一.基本原理 select控件在浏览器中是个永远的痛,不同的版本解析出来的可谓五花八门.主要有以下问题: 1,IE6中无法设置高度,Z INDEX永远在最上,无法被其它层遮挡 2,IE7中可以设置高度 ...

随机推荐

  1. spring DelegatingFilterProxy管理过滤器

    安全过滤器链 Spring Security的web架构是完全基于标准的servlet过滤器的.它没有在内部使用servlet或任何其他基于servlet的框架(比如spring mvc),所以它没有 ...

  2. Elasticsearch简单运算

    求平均数 { "query": { "bool": { "must": [ { "term": { "stor ...

  3. #define\const\inline的区别与联系

    总结: const用于代替#define一个固定的值,inline用于代替#define一个函数.是#define的升级版,为了消除#define的缺陷. 参考内容:http://www.cnblog ...

  4. 转载【Ubuntu】Ubuntu14.04虚拟机调整窗口大小自适应VMware14窗口

    Ubuntu屏幕居中一小块,很不好看 查看-–> 自动调整大小—>自动适应客户机/自动适应窗口 切一下就可以把Ubuntu图的界面大小调的和VMware窗口自适应了 效果:   转载 自h ...

  5. IOS如何打越狱包xcode无证书打包ios应用

    本文要介绍的是在无证书的情况下如何将自己应用打包出去在越狱设备上使用或发给第三方使用企业签名进行应用分发. 前提条件:拥有appleId账号,并且该账号已经注册开发者中心(无需花钱) 教程开始: 1. ...

  6. Cookie概述

    一.什么叫Cookie? Cookie翻译成中文是小甜点,小饼干,在Http中它表示服务器送给客户端浏览器的小甜点.其实Cookie就是一个键和一个值构成,随着服务器端的响应发送给客户端浏览器,然后客 ...

  7. intellijidea课程 intellijidea神器使用技巧 5-1 svn相关

    subversion ==> show local history 查看历史记录 Ctrl D 历史记录对比 ctrl alt z 复原

  8. Vue.js - Day2

    品牌管理案例 添加新品牌 删除品牌 根据条件筛选品牌 1.x 版本中的filterBy指令,在2.x中已经被废除: filterBy - 指令 ​<tr v-for="item in ...

  9. DOMNodeInserted,DOMNodeRemoved 和监听内容变化插件

    元素的增加 删除 及事件监听 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  10. document.URL 和 windows.location.href的区别

    1. 从输出结果上,document.URL 和 windows.location.href 没有区别.2. 非要说区别的话,你只可以读取document.URL的值,不能修改它.windows.lo ...