首页 > 其他 > 详细

div “下沉”

时间:2016-11-19 02:14:14      阅读:223      评论:0      收藏:0      [点我收藏+]

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

技术分享

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 “下沉”

原文:http://www.cnblogs.com/liujiangyi/p/6079266.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!