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)>. 这个内容不要删掉:“< ...
随机推荐
- Houdini 过程化地形系统(二):基于UE4的FC5植被系统(1)
背景 通过之前的几篇分析实践,已经基本打通了UE4的Houdini植被管线部分,并对Far Cry5(简称FC5)的植被系统的需求做了整理,在接下来的几节中,会关注于如何使用Houdini基于UE4来 ...
- SpringMVC+ Mybatis 配置多数据源 + 自动数据源切换 + 实现数据库读写分离
现在大型的电子商务系统,在数据库层面大都采用读写分离技术,就是一个Master数据库,多个Slave数据库.Master库负责数据更新和实时数据查询,Slave库当然负责非实时数据查询.因为在实际的应 ...
- 外部访问docker容器(docker run -p/-P 指令)
容器中可以运行一些网络应用,要让外部也可以访问这些应用,可以通过 -P(大写) 或 -p (小写) 参数来指定端口映射. (1)当使用 -P 标记时,Docker 会随机映射一个 49000~4990 ...
- linux cent os 6.5安装Nginx
1.下载相关组件 yum install -y gcc gcc-c++ 安装C/C++编译器 wget http://sourceforge.net/projects/pcre/files/pcre/ ...
- 【Zookeeper系列】构建ZooKeeper应用(转)
原文地址:https://www.cnblogs.com/sunddenly/p/4064992.html 一.配置服务 配置服务是分布式应用所需要的基本服务之一,它使集群中的机器可以共享配置信息中那 ...
- javascript 缩写技巧
19种JS高(炫)效(技)缩写法 https://segmentfault.com/a/1190000011229633
- vue的插槽slot
插槽是写在子组件上,用啦留给父级添加内容的位置接口: 1. 父级里的 <template :is='子标签名'>父插入内容</template>标签,里的内容 sl ...
- python全栈开发 * 29知识点汇总 * 180712
29 正则表达式 re模块一.正则表达式官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”, 这个“规则字符串”用来表达对字 ...
- python全栈开发 * 03 基本数据类型 * 180601
python基本数据类型 ( int , bool , str ) 一 python基本数据类型 (一)int ==> 整数.进行数学运算 (二)str ==> 字符串. ...
- exe电子书制作教程(超详细)【申明:来源于网络】
exe电子书制作教程(超详细)[申明:来源于网络] 地址:http://wenku.baidu.com/view/0b046907eff9aef8941e0631.html