html - 为什么内联 block div 彼此对齐不均匀？

Question

如何将两个具有 height 属性的 inline-block div 放在同一行？

预期:

#legend 和 #container 应该在同一行。

实际:

#legend 位于 #container 之后。

Fiddle

div {
  display: inline-block;
}

#legend {
  height: 500px;
  border: solid red;
}

#container {
  height: 500px;
  width: 500px;
  border: solid green;
}

<div id="legend">
  <p>Lorem</p>
</div>
<div id="container"></div>

另一方面，如果我们不放置height 属性，它works fine .

Answer 1

行内元素的初始设置是vertical-align: baseline。这意味着 span、textarea 和 img 等元素的默认 display 值为 inline，将自己与容器的基线对齐。

baseline

The line upon which most letters "sit" and below which descenders extend.

^{Source: Wikipedia.org}

在您的问题中，您已将 div 设置为 display: inline-block。这会激活基线对齐，并且框与彼此的基线垂直对齐。这就是您所看到的。

您可以通过覆盖 vertical-align 的默认值来解决该问题。试试这个:

div {
  display: inline-block;
  vertical-align: bottom;  /* new */
}

#legend {
  height: 500px;
  border: solid red;
}

#container {
  height: 500px;
  width: 500px;
  border: solid green;
}

<div id="legend">
  <p>Lorem</p>
</div>
<div id="container"></div>

或者，只需将一些文本放在空的 div 中(尽管 vertical-align 仍然可以派上用场，以完全平衡对齐)。

div {
  display: inline-block;
}

#legend {
  height: 500px;
  border: solid red;
}

#container {
  height: 500px;
  width: 500px;
  border: solid green;
}

<div id="legend">
  <p>Lorem</p>
</div>
<div id="container">text text text</div>