html - 两个内联 block 未对齐

Question

我在 container div 中有两个 div:JS Fiddle Link

<div id="container">
    <div class="leftContainer">
        Left
    </div>
    <div class="rightContainer">
        <h3>Right</h3>
    </div>
</div>

但我不确定为什么它们不与顶部对齐或与此 CSS 具有相同对齐方式的任何地方:

div#container{vertical-align:top;background:#e4e4e4}

div#container div{
  display:inline-block;
  width:200px;
  height:50px;

}
div#container div.leftContainer{background:#999}
div#container div.rightContainer{background:#555}

Answer 1

为 #container div 的子元素添加 vertical-align:top;

   div#container div{
    vertical-align:top;
    }