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

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. Ceph相关

    Ceph基础知识和基础架构简介 http://www.xuxiaopang.com/2020/10/09/list/#more大话Ceph http://www.xuxiaopang.com/2016 ...

  2. Android 8 蓝牙 A2DP流程

    记录一下蓝牙A2DP的流程 packages\apps\Settings\src\com\android\settings\bluetooth\BluetoothPairingDetail.java ...

  3. 外部访问docker容器(docker run -p/-P 指令)

    容器中可以运行一些网络应用,要让外部也可以访问这些应用,可以通过 -P(大写) 或 -p (小写) 参数来指定端口映射. (1)当使用 -P 标记时,Docker 会随机映射一个 49000~4990 ...

  4. The processing instruction target matching &quot;[xX][mM][lL]&quot; is not allowed.

    现象: ERROR   : The processing instruction target matching "[xX][mM][lL]" is not allowed.  异 ...

  5. go异常处理原则

    如果你定义的函数有可能失败,它就应该返回一个错误.当我调用其他package的函数时,如果这个函数实现的很好,我不需要担心它会panic,除非有真正的异常情况发生,即使那样也不应该是我去处理它.而pa ...

  6. [原]Docker-issue(2) http: server gave HTTP response to HTTPS client

    系统环境 查看 文章末尾 附录 问题点:新建local registry后,push新的image到local registry  未能成功,并报错误: The push refers to repo ...

  7. <?php if($value['udertype'] == 0) {?> <td>超级管理员</td> <?php } else if ($value['udertype'] == 1)

    <?php if($value['udertype'] == 0) {?> <td>超级管理员</td> <?php } else if ($value['u ...

  8. 【登录异常解决】Ubuntu 输入正确的密码后重新返回到登陆界面

    症状 Ubuntu 输入正确的密码后,黑屏一闪,重新返回到登陆界面. 原因一:主目录下的.Xauthority文件拥有者变成了root,从而以用户登陆的时候无法都取.Xauthority文件.说明:X ...

  9. 8、路由 router

    路由:router 用户功能 /user ----> index.html /user/login ----> login.html /user/reg ----> reg.html ...

  10. Eclipse使当前项目依赖另一个项目

    实例说明 在Eclipse中可以创建多个项目实现不同的软件开发,也可以使用多个项目来开发单独的大型软件,每个项目负责单独的模块部门,这样可以使软件的模块分类更清晰,可以单独的维护每个模块部分.但是项目 ...