满足时为什么我的div低于其他人？

Question

我一直在试用div溢出。我遇到的问题是div没有“正常”显示。这是一个简单的HTML和CSS，我希望有人能解释我的问题吗？

我当时希望这些方框显示在同一行。

<div class='content'>
  <div class='box'>
    hihi
  </div>
  <div class='box'>
  </div>
</div>
...

http://codepen.io/ycmjason/pen/xbXpmV/

Answer 1

您在{strong> vertical-align: top; 上缺少box class属性。

应该是：

.box{
    display:inline-block;
    **vertical-align: top;**
    width:50px;
    height:50px;
    margin-left:15px;
    background: #55CC55;
}

Answer 2

div的默认垂直对齐值为baseline，这意味着，只要您在其中写入文本，该框就会移到底部。如果没有文本，则没有基线可以对齐，所以它们只是跳到顶部。要解决此问题，请将vertical-align: top;添加到.box。