html – 嵌套在另一个inline-block元素中的inline-block元素有一
我是新学
HTML,现在我有一些代码
<div id="container" style="height:300px;width:500px;font-size:0"> <div id="leftBox" style="display: inline-block; background: pink; width: 50%; height: 100%;"> <div id="wrapper" style="height:10%;"> <div style="display: inline-block; background: red; width: 50%; height: 100%;"></div> <div style="display: inline-block; background: blue; width: 50%; height: 100%;"></div> </div> </div> <div id="rightBox" style="display: inline-block; background: green; width: 50%; height: 100%;"></div> </div> (我在http://jsfiddle.net/Simon_Chan/Z3WyA/发布了它) 你可以看到leftBox有一个很大的offsetTop,但是如果没有包装器或包装器的高度是100%或者没有rightBox或者包装器中没有元素,则在所有这些条件下leftBox都没有offsetTop. 为什么这样?以及如何删除它? 谢谢! 解决方法
要解决此问题,您需要将vertical-align:top添加到#leftBox或#rightBox
原因是默认的
父框的基线是框的底部. Baseline定义为
您在问题中描述的所有案例都会导致基线被更改,从而根据需要对齐元素. 基线的一个很好的例子是以下代码,其中包装器中没有元素< div>但是非常大的字体大小的文字.你可以看到绿色底部< div>与父级的基线(红色虚线边框< div>)对齐,以及粉红色< div>文本如何移动到它位于父基线上的文本的位置. <div style="height:300px;width:500px;font-size:0;border:1px dotted red"> <div style="display: inline-block; background: pink; width: 50%; height: 100%;"> <div style="height:100%;font-size:150px">foo</div> </div> <div style="display: inline-block; background: green; width: 50%; height: 100%;"></div> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |