`<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 插件,经过自己的修 ...
随机推荐
- ViewFlow增强onItemClick功能及ViewFlow AbsListView源代码分析
先看实现效果,上图: ViewFlow是一个非常好用的,用于不确定item个数的水平滑动切换的开源项目. 可是从github上下载的ViewFlow事实上是不支持onItemClick功能的,tou ...
- sanic官方文档解析之Example(一)
1,示例 这部的文档是简单的示例集合,它能够帮助你快速的启动应用大部分的应用,这些应用大多事分类的,并且提供给ini工作的连接代码: 1.1,基础示例 这部分示例集成了提供简单sanic简单的代码 单 ...
- 报错：out of memory java heap space
PermGen space的全称是Permanent Generation space,是指内存的永久保存区域OutOfMemoryError: PermGen space从表面上看就是内存益出,解决 ...
- 提升vector性能的几个技巧
原文:https://www.sohu.com/a/120595688_465979 Vector 就像是 C++ STL 容器的瑞士军刀.Bjarne Stoutsoup 有一句话 – “一般情况下 ...
- 微信小程序存放视频文件到阿里云用到算法js脚本文件
peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...
- 20170225-ALV tree 显示
1.写程序, 2.话屏幕9000,CALL SCREEN 9000.(双击屏幕进去画个容器就ok,+OK_CODE,+去掉注释) 3.处理好ALV 的PBO 初始化,处理用户事件PAO,user co ...
- extjs4.0 treepanel节点的选中、展开！ 数据的重新加载
1.extjs4.0API较3.0有非常大变化2.多级子父节点的选中和展开.3.数据的重新加载.tree.getStore().load4.节点的移除,从树中根据ID获取节点 tree.getStor ...
- Ural 1109 Conference（最小路径覆盖数）
题意:A国家有M个代表,B国有N个代表,其中有K对代表可以进行谈判(一个是A国的,一个是B国的),并且每一个代表至少被包含在其中一对中(也就是说,每个人可以至少找到另外一个人谈判),每一对谈判需要一对 ...
- [原创]java调用PageOffice生成word
一.在开发OA办公或与文档相关的Web系统中,难免会遇到动态生成word文档的需求,为了解决工作中遇到导出word文档的需求,前一段时间上网找了一些资料,在word导出这方面有很多工具可以使用,jac ...
- LA-4726 (斜率优化+单调队列)
题意: 给定一个01序列,选一个长度至少为L 的连续子序列使其平均值最大;输出这个子序列的起点和终点;如果有多个答案,输出长度最小的,还有多个就输出第一个编号最小的; 思路: 用sum[i]表示[1, ...