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)>. 这个内容不要删掉:“< ...
随机推荐
- 阿里云ECS服务器无法上传文件的解决方案
1.安装软件启动FTP服务 yum install vsftpd # 安装service vsftpd start # 启动服务chkconfig vsftpd on # 开机启动 2.防火墙ipta ...
- 用命令创建MySQL数据库
一.连接MYSQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1. 连接到本机上的MYSQL. 首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u roo ...
- 21 go并发编程-下
如何等待一组goroutine结束 1. 使用不带缓冲区的channel实现. 原理: 每个goroutine都往一个channel里写入一个值,然后我们去遍历这个管道的数值,由于不带缓冲区,那么必须 ...
- ASP.NET Core MVC+EF Core从开发到部署
笔记本电脑装了双系统(Windows 10和Ubuntu16.04)快半年了,平时有时间就喜欢切换到Ubuntu系统下耍耍Linux,熟悉熟悉Linux命令.Shell脚本以及Linux下的各种应用的 ...
- hibernate源码分析1
- nfs文件共享服务
文件共享服务端10.100.1.13: yum install -y rpcbind nfs-utils #rpcbind可以给nfs开多个端口 service rpcbind start serv ...
- python处理u开头的字符串
是用python处理excel过程中,从表格中解析除字符串,打印出来的中文却显示成了u'开头的乱码字符串,在控制台中输出的编码格式是utf-8,而excel表格的数据也是utf-8编码成的,但是解析成 ...
- mysql sql注入getshell新姿势
sql.php?sql=1'报错信息为:1064:You have an error in your SQL syntax; check the manual that corresponds to ...
- Finalize方法的生成
Finalize在c#编程语言中需要特殊语法,因此,c#要求在类名前加~符号来定义Finalize方法:例如 internal class FinalizeDemo { ~FinalizeDemo() ...
- Source Insight中文注释乱码、字体大小、等宽解决方法
中文注释乱码解决方法: 用记事本打开源文件,然后,选择文件->另存为,编码选为”ANSI“ 字体的调整: Source Insight 菜单栏选择Options->Document O ...