8

我是新学习 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，但是如果没有wrapper 或 wrapper的高度为100% ，或者没有rightBox 或没有元素wrapper，在所有这些条件下leftBox都没有offsetTop。

为什么这样做？以及如何删除它？

谢谢！

4

2 回答 2

7

要解决问题，您需要vertical-align:top添加#leftBox 或 #rightBox

原因是默认vertical-align值是baselinewhich

将框的基线与父框的基线对齐

父框的基线是框的底部。

基线定义为

大多数字母“坐”的线和下降线延伸的线下方

您在问题中描述的所有情况都会导致基线被更改，从而根据需要对齐元素。

基线的一个很好的示例是以下代码，其中您的包装器中没有元素，<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>
于 2013-04-10T21:24:56.837 回答
4

这样做是因为各种盒子位于基线上的方式。消除该问题的最简单方法是以不同方式垂直对齐它们。例如使用div {vertical-align:top }

要查看默认情况下内联块框如何位于基线上，请参阅http://jsfiddle.net/veCEf/。请特别注意没有任何内容的 inline-block div 框如何使其框的底部位于基线上，而一旦它们有内容，其内容的底部位于基线上。

于 2013-04-10T21:24:04.617 回答