为什么内联块div对齐不均匀？

Question

如何在同一行中定位两个inline-block div个height个属性？

预期：

#legend和#container应位于同一行。

实际值：

#legend位于#container之后。

Fiddle

＆＃13;

＆＃13;

div {
  display: inline-block;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另一方面，如果我们不提供height属性，则为works fine。

Answer 1

内联级元素的初始设置为vertical-align: baseline。这意味着span，textarea和img等默认display值为inline的元素将与容器的基线对齐。< / p>

  

baseline

     

大多数字母＆＃34;坐在＆＃34;下方延伸的地方。

     

     

^{来源：Wikipedia.org}

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

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

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，只是在空div中添加一些文本（尽管vertical-align仍然可以派上用场来完全均衡对齐）。

＆＃13;

＆＃13;

div {
  display: inline-block;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;