`<img>`放到`<div>`中底部出现空隙 以及解放方案.
形成情况:
- 外部的
不设置宽高, 由内部图片撑开
- 撑开后, 底部会有空隙
问题原因:
- div元素中的行内元素的默认
vertical-align对齐方式是基线baseline - img是行内元素, 所以会与基线对齐, 造成底下的空隙
解放方法:
- img标签转换为块级元素:
display: block - 设置外层div的字体大小为0,
font-size: 0 - 设置img垂直方向的对齐方式, 只要是其他三种皆可,
vertical-align:bottom，vertical-align:middle，vertical-align:top
`<img>`放到`<div>`中底部出现空隙 以及解放方案.的更多相关文章
- js放到head中失效的原因与解决方法
1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- NodeJS写个爬虫，把文章放到kindle中阅读
这两天看了好几篇不错的文章,有的时候想把好的文章 down 下来放到 kindle 上看,便写了个爬虫脚本,因为最近都在搞 node,所以就很自然的选择 node 来爬咯- 本文地址:http://w ...
- 如何让图片在垂直方向与 div的底部对齐 水平居中
需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位. 如不直接用 等去定位. 因为这些好像不好定位 ...
- div中字垂直居中对齐
div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...
- div中的字符换行
div中的字符换行 转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html 1.强制不换行,同时以省略号结尾. <div style ...
- 【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）
今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...
- vue setTimeout用法 jquery滚动到某一个div的底部
//vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...
- div中的内容超过容器宽度的问题
问题描述: <div class="category"> <div class="column-a">排名</div> ...
- 一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部
前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...
随机推荐
- Kafka知识点汇总
整体结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZXJpY19zdW5haA==/font/5a6L5L2T/fontsize/400/fill/I ...
- iOS之Prefix.pch
本文转载至 http://blog.csdn.net/lvxiangan/article/details/21325093 Prefix.pch的作用和用法 Hello World_Prefix. ...
- ECMAScript学习笔记
1. ECMAScript不存在块级作用域,因此在循环内部定义的变量,在循环外也是可以访问的 eg: var count =10; fpr(var i=0; i<count; i++){ ale ...
- Tomcat的虚拟主机的配置
比如:配置一个虚拟主机的名字是www.sina.com 1 改动window系统中的HOST文件[C:\WINDOWS\system32\drivers\etc\hosts] 127.0.0.1 ...
- CVE-2015-7547漏洞分析从原因到利用到补丁（非常适合小白）【转】
本文转载自:http://blog.csdn.net/u012406115/article/details/72232535 一. 漏洞概述 CVE漏洞链接:http://www.cv ...
- bzoj4103: [Thu Summer Camp 2015]异或运算
对于每个询问暴力枚举x~y,然后在Trie去找第k大,开始我写了个二分答案然后算比当前答案大的个数,打了个第10个点的表就跑出19s+比bzoj垫底还慢4s+ 然而不用二分,直接1000个点一起在树上 ...
- 从OutStreamWriter 和Filewriter谈Java编码
首先看JAVA API的描述: ABOUT OutputStreamWriter: "An OutputStreamWriter is a bridge from character str ...
- 002--linux基础命令
退出终端命令:exit 关闭Linux系统的命令:init 0 切换虚拟终端的方法:Ctrl+Alt+F[1-6] who命令 :查看有多少个终端打开着 whoami命令:获取当前用户名 date命令 ...
- hibernate的基础学习--多对多关联
多对多采用学生老师模型进行测试 学生配置文件: <?xml version="1.0" encoding="utf-8" ?> <!DOCTY ...
- HDU 5882 Balanced Game (水题)
题意:问 nnn 个手势的石头剪刀布游戏是否能保证出每种手势胜率都一样. 析:当每种手势的攻防个数完全相等才能保证平衡,所以容易得出 nnn 是奇数时游戏平衡,否则不平衡. 也就是说打败 i 的和 i ...