浮动左div与文本向下移动

Question

我正在学习CSS并进行查询。当我漂浮左侧的div然后他们坐在一条直的水平线上，但在其中任何一个内部有一些文字移动它垂直移动。我用Google搜索但无法找到一个好的解释。请帮助我理解它为什么会发生。

div#red {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
div#blue {
  width: 25px;
  height: 25px;
  border: 1px solid blue;
}
div#green {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.box {
  display: inline-block;
}

<div class="box" id="red">

</div>
<div class="box" id="blue">
  Tri
</div>
<div class="box" id="green">

</div>

Answer 1

您可以将vertical-align: bottom添加到.box：

div#red {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
div#blue {
  width: 25px;
  height: 25px;
  border: 1px solid blue;
}
div#green {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.box {
  display: inline-block;
  vertical-align: bottom;
}

<div class="box" id="red">

</div>
<div class="box" id="blue">
  Tri
</div>
<div class="box" id="green">

</div>