`<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 插件,经过自己的修 ...
随机推荐
- Spark 学习笔记：（二）编程指引（Scala版）
参考: http://spark.apache.org/docs/latest/programming-guide.html 后面懒得翻译了,英文记的,以后复习时再翻. 摘要:每个Spark appl ...
- Android开发之开机自动启动应用
package com.raycloud.wolf.autostart; import android.content.BroadcastReceiver; import android.conten ...
- Spring Boot 整合Filter
两种方法 方法一: 正常创建好Filter类,配置完成 package clc.user.filter; import javax.servlet.Filter; import javax.servl ...
- Android 源码架构
我们都知道Android系统是一个开源工程,在网上可以下载到源代码. 一般在网上搜索一下,就会找到各种下载源代码的方法,比如使用Git和Repo,android源代码下载的网址是http://andr ...
- [RK3399][Android7.1] 调试笔记 --- 模块编译32位动态库【转】
本文转载自:http://blog.csdn.net/kris_fei/article/details/78923784 Platform: RK3399 OS: Android 7.1 Board: ...
- YTU 2443: C++习题 复数类--重载运算符3+
2443: C++习题 复数类--重载运算符3+ 时间限制: 1 Sec 内存限制: 128 MB 提交: 1368 解决: 733 题目描述 请编写程序,处理一个复数与一个double数相加的运 ...
- 关于js的值传递和引用传递
最近在弄一个东西,明明就很简单的.不知道为啥有个坑,双向绑定,不过当有个数组为空时,它不会发送空的数组,而是不发送.这就坑爹了.导致老是删不掉. 处理了下,改成验证为空时,发送'[]‘字符串.成功.但 ...
- A+B Problem && OJ推荐【持续更新】
目录 List 前言 长郡 Position: code 1. 2. 持续更新,么么哒 List 前言 有没有觉得写这篇文章很奇怪,这个还是有原因的.①很多OJ都有着道题,所以发个博客②这可以介绍很多 ...
- python startswith和endswith
startswith判断文本是否以某个或某几个字符开始; endswith判断文本是否以某个或某几个字符结束; text = 'Happy National Day!' print text.star ...
- Android控件之CalendarView 日历对话框
在Android 3.0中新增的日历视图控件可以显示网格状的日历内容,android.widget.CalendarView是从android.widget.FrameLayout中继承. Calen ...