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

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 “下沉”的更多相关文章

  1. 为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉?

    为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...

  2. Css 使div标签下沉到页面最低部

    .footer{ position:fixed; bottom:0; } 使用这两个标签就能达到效果

  3. div错位/解决IE6、IE7、IE8样式不兼容问题

    IE6里DIV错位的问题    原文:chinafine 采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离 ...

  4. li下沉 margin-top越界 浮动带来的影响

    使用li嵌套实现的二级导航菜单,在IE浏览器下显示正常,而在谷歌及360极速模式下最后的几个li标签下沉了,其实在webkit内核的浏览器中都会有这种情况,如下图: 出现此种状况,有两种可能: 1.导 ...

  5. div错位解决IE6、IE7、IE8样式不兼容问题

    IE6里DIV错位的问题       采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离增加了3~5个PX, ...

  6. DIV+CSS解决IE6,IE7,IE8,FF兼容问题

    1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...

  7. 网站常见问题及解决方法(div/css)

    18.<a> 在IE6,7 下面重新定义宽和高的代码:{  display:block; display:-moz-inline-stack; display:inline-block;  ...

  8. 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 ...

  9. 标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华

    以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“< ...

随机推荐

  1. HDFS: The short-circuit local reads feature cannot be used

    问题: method:org.apache.hadoop.hdfs.DomainSocketFactory.<init>(DomainSocketFactory.java:69) The ...

  2. SpringMvc中获取Request

    Controller中加参数 @Controller public class TestController { @RequestMapping("/test") public v ...

  3. C# 多线程中经常访问同一资源可能造成什么问题?

    竞态条件和死锁. 如果两个或多个线程访问相同的对象,或者访问不同步的共享状态 ,就会出现竞态条件: 为了避免出现该问题,可以锁定共享的对象.但是过多的锁定也会有麻烦,那就是死锁: 当至少有两个线程被挂 ...

  4. 解决importerror no module named mysqldb

    在window中 1:在Scripts文件夹下会出现一系列和pip有关的文件,DOS中到Scripts,运行:pip install mysql-python 2:报错:Microsoft Visua ...

  5. [原]在使用ubuntu14.04,安装devstack的时候报错./stack.sh: line 463: generate-subunit: command not found

    =======在使用ubuntu14.04,安装devstack的时候报错./stack.sh: line 463: generate-subunit: command not found 2016- ...

  6. springmvc中为我们做了什么

    这应该是每个使用框架的人应该自问的.这就要从没有使用框架时说.在没用框架开发web应用时,自己是怎么开发的,就是写servlet,jsp. 使用springmvc后,使用Controller注解,其实 ...

  7. vi替换字符串

    :%s/vivian/sky/g(等同于 :g/vivian/s//sky/g) 替换每一行中所有 vivian 为 sky

  8. pdf转html插件~~~pdf2htmlEX安装,配置及使用

    这是一个将pdf转化为html的服务,开源的. 此功能服务的代码在git上的地址为: https://github.com/coolwanglu/pdf2htmlEX/wiki 安装: 在ubuntu ...

  9. 21.react 组件通信

    状态属性可以修改 this.setState()中可以写对象,也可以写方法 <script type="text/babel"> class Test extends ...

  10. python全栈开发 * 24 知识点汇总 * 180705

    24 模块-------序列化一.什么是模块 模块:py文件就是一个模块.二.模块的分类:(1)内置模块 (登录模块,时间模块,sys模块,os模块)(2)扩展模块 (itchat 微信有关,爬虫,b ...