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

在编写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. DB2去重复的几种方法

    DB2去重的几种方法 有两个意义上的重复记录,一是完全重复的记录,也即所有字段均重复的记录,二是部分关键字段重复的记录,比如Name字段重复,而其他字段不一定重复或都重复可以忽略. 例如下表:tabl ...

  2. Day4上午

    expect100+50+50, In fact 100+10+0. 代码能力还有待提高,部分分应该能拿的.结果...力不从心啊. T1 贪心做的不知对不对. 看来思路是对的,不知道能不能对. 暴力做 ...

  3. 零度4W1H提问规则

    WHAT:您现在的需求和目的是什么,请按条理描述清楚. WHERE:在什么平台.环境和工具下发生此问题. WHEN:何时发生的该问题,该问题是否能够重现. WHY:为什么不能通过搜索引擎来解决您的问题 ...

  4. 对于ESP、EBP寄存器的理解

    原文:http://blog.csdn.net/yeruby/article/details/39780943 esp是栈指针,是cpu机制决定的,push.pop指令会自动调整esp的值: ebp只 ...

  5. Java中的阻塞队列-LinkedBlockingQueue(二)

    原文地址:http://benjaminwhx.com/2018/05/11/%E3%80%90%E7%BB%86%E8%B0%88Java%E5%B9%B6%E5%8F%91%E3%80%91%E8 ...

  6. Linux 作业调度器 crond

    linux缺省会启动crond进程,crond进程不需要用户启动.关闭.  需要启动/关闭cron /sbin/service crond start --启动服务 /sbin/service cro ...

  7. jQuery的下拉框应用

    jQuery的下拉框应用 jQuery的下拉框左右选择应用 直接上代码 <!DOCTYPE html> <html> <head> <meta charset ...

  8. mybatis springmvc批量删除 2最新

    service层: @Override public void batchDeletes(List list) { creditDao.batchDeletes(list); } 控制层control ...

  9. 使用UserLock如何实现工作站登陆访问限制

    UserLock允许用户限制受保护账户可登陆的工作站/终端.工作站/终端限制可以通过设置或者使用特定的IP范围,计算机名/IP或组织单位实现. 对于每个工作站限制你需要指定所要限制的会话类型(默认情况 ...

  10. 从刷票了解如何获得客户端IP

    我的个人博客,源地址:http://www.woniubi.cn/get_client_ip/ 前两个星期帮一个朋友的亲戚的孩子刷票,谁让咱们是程序员呢.这当中也遇到过重装系统,除灰尘,淘宝购物,盗Q ...