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

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. 《FPGA全程进阶---实战演练》第三十二章 Signal Tap II 应用实例

    还有几天就要交文章终稿了,三年的研究生生活也快要结束了,时间飞快,岁月如梭,但学习技术的热情仍然不能松懈,不懂的东西太多,需要实时保持奋斗!!过些天会继续更新<FPGA全程进阶---实战演练&g ...

  2. 当我们直接打印定义的对象的时候,隐含的是打印toString()的返回值。

      以下介绍的三种方法属于Object: (1)  finalize方法:当一个对象被垃圾回收的时候调用的方法. (2)  toString():是利用字符串来表示对象. 当我们直接打印定义的对象的时 ...

  3. 【教程】Win7-64位安装OpenSSL详细过程

    1.下载ActivePerl  5.24.0.2400 http://www.activestate.com/activeperl/downloads 图片:ActivePerl-5.24.0.240 ...

  4. Gin框架初识

    一.安装 使用go下载gin库,命令行输入:go get github.com/gin-gonic/gin ,一般使用需要的依赖: import "github.com/gin-gonic/ ...

  5. RTX参数配置

        RTX操作系统的配置工作是通过配置文件RTX_Conf_CM.c实现.     在MDK工程中打开文件RTX_Conf_CM.c,可以看到如下图5.2所示的工程配置向导:  20 Task C ...

  6. 【CF446D】DZY Loves Games 高斯消元+矩阵乘法

    [CF446D]DZY Loves Games 题意:一张n个点m条边的无向图,其中某些点是黑点,1号点一定不是黑点,n号点一定是黑点.问从1开始走,每次随机选择一个相邻的点走过去,经过恰好k个黑点到 ...

  7. Linux下的搜索查找命令的详解(locate)

    3.locate locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中 ...

  8. pandas replace 替换功能function

    list like replace method dict like replace method regex expression import pandas as pd import numpy ...

  9. Mac上Vim的配置文件及插件

    Vim是公认的终端编辑神器,配置文件设置的好,再加上各种功能的插件,更能使其如虎添翼,下面就分享出博主的配置文件,也是从网上大神那里拷过来的.配置文件在用户目录下~/.vimrc ,如果没有,就自己创 ...

  10. Nestjs 序列化(Serialization)

    文档 在发送实际响应之前,Serializers为数据操作提供了干净的抽象层.例如,应始终从最终响应中排除敏感数据(如用户密码) λ yarn add class-transformer cats.e ...