Question

我不明白为什么内联块div由于内部内容的添加而失去了位置。

我的CSS：

#header {
    height: 80px;
    width: 66%;
    min-width: 1024px;
    top: 0px;
    margin: 0 auto;
    background-color: rgb(128,128,128);
}
#header-left {
    position: relative;
    display: inline-block;
    height: 80px;
    width: 25%;
    left: 0px;
    top: 0px;
    background-color: rgb(128,0,0);
}
#header-center {
    position: relative;
    display: inline-block;
    height: 80px;
    width: 50%;
    background-color: rgb(0,128,0);
    text-align: center;
}
#header-right {
    position: relative;
    display: inline-block;
    height: 80px;
    width: 25%;
    background-color: rgb(0,0,128);
}

我的HTML：

<div id=header-bar><div id=header><div id=header-left></div><div id=header-center><div>Hello</div></div><div id=header-right></div></div></div>

请参阅小提琴：https://jsfiddle.net/ude04hf4/

我想添加内部内容，但不会影响其父级的位置。我发现这样做的唯一方法是添加float：left;每个内部元素的风格。必须有更好的方法吗？

Answer 1

您需要更改元素的vertical-align属性值。

默认情况下，vertical-align property's value is baseline，这就是中心元素的文本与前一个元素的基线对齐的原因（注意当元素不包含文本时不会发生此问题）。

如果您将vertical-align属性值更改为top之类的值，它将按预期工作：

Updated Example

#header-center {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 80px;
    width: 50%;
    background-color: rgb(0,128,0);
    text-align: center;
}

为什么内联块div被内部内容搞砸了？

1 个答案: