div “下沉”
最近在做一个计算器,按键整体布局如下:

Div2,div3 display属性设置为inline-block。三个div “容器”没添加任何元素时,布局是符合预想的。添加上按键后,布局变成下面这样了:

Div3 明显得下沉了。重新确认了按键和容器的尺寸,按键都在容器内,不存在由于存放存放不下,导致布局的改变。Div1 也不存在外边距。手动添加div3 的margin-top为负值,div3 也没“升上去”。最后在网上找到了思路:div3 默认的垂直对齐方式是baseline,将垂直对齐设置为顶部对齐,div3 就没沉下来了,即:vertical-align: top;
参考资料:
http://christopheraue.net/2014/03/05/vertical-align/
http://www.w3schools.com/CSSref/pr_pos_vertical-align.asp
div “下沉”的更多相关文章
- 为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉?
为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...
- Css 使div标签下沉到页面最低部
.footer{ position:fixed; bottom:0; } 使用这两个标签就能达到效果
- div错位/解决IE6、IE7、IE8样式不兼容问题
IE6里DIV错位的问题 原文:chinafine 采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离 ...
- li下沉 margin-top越界 浮动带来的影响
使用li嵌套实现的二级导航菜单,在IE浏览器下显示正常,而在谷歌及360极速模式下最后的几个li标签下沉了,其实在webkit内核的浏览器中都会有这种情况,如下图: 出现此种状况,有两种可能: 1.导 ...
- div错位解决IE6、IE7、IE8样式不兼容问题
IE6里DIV错位的问题 采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离增加了3~5个PX, ...
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...
- 网站常见问题及解决方法(div/css)
18.<a> 在IE6,7 下面重新定义宽和高的代码:{ display:block; display:-moz-inline-stack; display:inline-block; ...
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题(转至http://www.douban.com/note/163291324/)
2011-07-25 21:11:47 DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...
- 标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华
以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“< ...
随机推荐
- Netty HTTP 服务端入门开发
一. HTTP 简介 HTTP(超文本传输协议) 协议是建立在 TCP 传输协议之上的应用层协议,它的发展是万维网协会和 Internet 工作小组和 IETF 合作的结果. HTTP 是一个属于应用 ...
- there was an error running the selected code generator unable to retrieve metadata for
there was an error running the selected code generator unable to retrieve metadata for PROBLEM: I ha ...
- 【转】Yelp是如何实现每天运行数百万个测试的
Yelp每天要运行数百万个测试,确保开发人员提交的代码不会对已有的功能造成破坏.如此巨大规模的测试,他们是怎么做到的呢?以下内容翻译自 Yelp 的技术博客,并已获得翻译授权,查看原文 How Yel ...
- linux中,history命令,显示时间戳?操作人?IP地址?
需求描述: 在linux环境中,有的时候为了审计的需要,要记录谁什么时间从什么IP登录,执行了什么命令,bash的history命令就能够记录这些信息,但是在默认的情况下,是不记录时间的,所以呢,在这 ...
- 一个自定义python分布式专用爬虫框架。支持断点爬取和确保消息100%不丢失,哪怕是在爬取进行中随意关停和随意对电脑断电。
0.此框架只能用于爬虫,由框架来调度url请求,必须按照此方式开发,没有做到类似celery的通用分布式功能,也不方便测试.可以使用另外一个,基于函数式编程的,调度一切函数的分布式框架,做到了兼容任何 ...
- PHP 正则 空字符 / NUL字符
\xnn 匹配中ASCII代码十六进制代码为nn的字符.[\x00-\x7F] 匹配ASCII值从0-127的字符.0-127表示单字节字符,也就是:数字,英文字符,半角符号,以及某些控制字符. 正则 ...
- mongodb配置、启动、备份
Mongodb: 启动: /usr/bin/mongod --config /data/mydata/mongodb/mongodb.conf 停止Mongodb: 方法一:$ mongod --sh ...
- react+mobx 编写 Async装饰器
使用 // indexStore.js import axios from "axios"; import { from } from "rxjs"; impo ...
- 对象copy的两种方式--序列化--clone
对象实现copy有多中方式,最土的方法就是直接new,然后塞值,不过这种方法是真的low,下面着重说说Object类中的clone() 和 序列化反序列化copy Object 中 clone的方法 ...
- LIBS入门
样品汽化产生自由原子,原子电子的激发诱导光辐射产生表征原子的分立光谱,采集和分析光辐射. 光源:1064nm Nd:YAG固态激光器,10ns脉冲,焦点光密度1 GW·cm−2 可见和紫外光源. ...