嵌套在另一个inline-block元素中的inline-block元素具有offsetTop [英] inline-block element nested in another inline-block element has an offsetTop

问题描述

我是新学习HTML的人，现在有一些代码，例如

I'm new learning HTML and now I have some code like

<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 或，其中包装器，在所有这些条件下， leftBox 没有offsetTop。

You can see the leftBox has a big offsetTop, but if there is no wrapper or wrapper's height is 100% or there is no rightBox or there is no elements in wrapper, in all these conditions leftBox has no offsetTop.

为什么呢？以及如何删除它？

Why do it? And how to remove it?

谢谢！

推荐答案

要修复您需要将 vertical-align：top 添加到 #leftBox 或 <$的问题c $ c> #rightBox

To fix the problem you need to add vertical-align:top to #leftBox or #rightBox

原因是默认 vertical-align 的值为基线其中

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

Aligns the baseline of the box with the baseline of the parent box

父框的基线位于框的底部。

The baseline of the parent box is the bottom of the box.

基线定义为

多数字母坐着，后继字母在其下延伸

the line upon which most letters "sit" and below which descenders extend

您在问题中描述的所有情况都导致基准线发生了变化作为元素

All the cases you describe in the question result in the baseline being altered which aligns the elements as desired.

基线的一个很好的例子是以下代码，其中包装器中没有元素< ; div> ，但使用非常大的字体大小的文本。您可以看到绿色 < div> 的底部如何与父级的基线对齐（红色虚线边框< div> ）以及 pink < div> 的方式文本使其移动到位于父基线上的文本所在的位置。

A good example of the baseline is the following code in which there are no elements in your wrapper <div> but very large font-size text instead. You can see how the bottom of the green <div> is aligned to the baseline of the parent (the red dotted border <div>) and how the pink <div>s text makes it move to where the text it sitting on the parent baseline.

<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>

这篇关于嵌套在另一个inline-block元素中的inline-block元素具有offsetTop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！