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

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. [Z] SQL SERVER 的前世今生--各版本功能对比

    https://www.cnblogs.com/OwenZeng/p/6813143.html

  2. 【分享】Asp.net Core相关教程及开源项目

    入门 全新的ASP.NET:  https://www.cnblogs.com/Leo_wl/p/5654828.html 在IIS上部署你的ASP.NET Core项目: https://www.c ...

  3. 目前我对ReactNative的了解

    1.什么是React? 一个js组件库,不同于angular的是一个完整的framework,React需要像jQuery一样写事件监听逻辑,最大特点是Virtual DOM. 官网:https:// ...

  4. GLSL数组类型、浮点数Uniform

    // 添加shader中的uniform ss->addUniform(new osg::Uniform("test1", false)); //设置shader中的unif ...

  5. 基于ARM9和嵌入式Linux系统的多功能综合通信控制系统的框架

    基于ARM9硬件平台和嵌入式Linux系统的多功能综合通信控制系统的框架设计及各模块的功能.系统采用符合POSIX.1标准的C语言编写,实现了对下位机传送数据帧的采集.分析和存储,并能根据上位机的配置 ...

  6. ArcGIS删除数据异常崩溃

    环境 ArcGIS Desktop10.1,ArcSDE10.1,Oracle 11.2.0.4客户端和服务器端(服务器端搭建RAC集群) 问题描述 在使用ArcCatalog连接数据库进行数据删除时 ...

  7. pymysql.err.InterfaceError: (0, '')解决办法

    导致这个错误的原因是通过pymysql连接MySQL,没有关闭连接的操作,所以短时间内不会出问题,长时间保持这个连接会出现连接混乱.虽然看着自己的代码没错,还是会报 pymysql.err.Inter ...

  8. 11.17 luffycity(7)完结

    2018-11-17 15:59:01 路飞项目已经完结!后面已是flask的学习!然后还有十几天的课程等回学校再看 明天归校!!  开始全面整理自己学习的知识,整理博客!还有好多面试题!233333 ...

  9. swust oj 956

    约瑟夫问题的实现 2000(ms) 65535(kb) 3266 / 10775 n个人围成一个圈,每个人分别标注为1.2.....n,要求从1号从1开始报数 ,报到k的人出圈,接着下一个人又从1开始 ...

  10. Unity 为队伍设置不同颜色的shader

    在魔兽争霸等一些游戏中,我们通过模型的颜色就能很轻松的区分队伍,如下:   实现的方法有很多,比如: 1,为不同队伍各出一张不同颜色的贴图(Hmmm,war3有的地图可以容纳12只队伍,美术大大们会很 ...