Question

有人可以解释为什么红色div容器（“Label”）在底部对齐，绝对位置作为内部容器，以及位置相对于顶部的情况。为什么影响内部div容器的外部div容器？

<div>
  <div style="position: relative; display:inline-block; height:auto; background: red">Label</div>
  <div style="position: relative; display:inline-block; height:100px; width:100px; background: blue">
  <div style="position: absolute; height: 20px; width: 20px">XXXX</div>
</div>

https://wiki.debian.org/Keyboard

<div>
   <div style="position: relative; display:inline-block; height:auto; background: red">
      Label
   </div>
   <div style="position: relative; display:inline-block; height:100px; width:100px; background: blue">
      <div style="position: relative; height: 20px; width: 20px">XXXX</div>
   </div>

With inner div position absolute

Answer 1

原因是，display: inline-block个项被视为位于一个行（如文本），默认情况下是其文本内容（更准确地说： last line 他们的文本，至少只要它仍在容器内部）在底部对齐。

当您将第三个DIV position更改为absolute时，其文本将与父DIV无关，而是将块本身放在父DIV的左上角。从现在起，没有＆＃34;真实文本＆＃34;直接在第二个DIV中，第二个DIV的底部与第一个DIV的文本基线（不确定英语中的这个表达式）对齐。

Answer 2

之前已经回答过：

Why does an inline-block div get positioned lower when it has content? [duplicate]

这是因为vertical-align默认设置为baseline。您可以通过将问题设置为顶部来解决问题：

div {
display:inline-block;
margin-:2px;
height:100px;
width:25px;
border:1px solid black;
vertical-align: top;
}

归功于 wakooka 的原始答案

Answer 3

＆＃39;内联块的基线＆＃39;是正常流程中最后一个行框的基线。在这种情况下，基线是底部边缘。要更改它，请添加vertical-align：top;标签：

  <div style="position: relative; display: inline-block; height: auto; background: red none repeat scroll 0% 0%; vertical-align: top;">Label</div>
<div style="position: relative; display:inline-block; height:100px; width:100px; background: blue">
  <div style="position: absolute; height: 20px; width: 20px">XXXX</div>
</div>

CSS位置绝对/相对更改外部div对齐

3 个答案: