html - 为什么我的 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

box class 上缺少 vertical-align: top; 属性。

应该是:

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