html - 具有固定高度和宽度的内联 block div，不均匀

Question

我希望所有三个盒子都在同一水平面上，您会看到盒子 2 位于盒子 1 和 2 下方，因为它的内容比其他盒子少，但必须有一些我缺少的样式使每个 div 显示在同一级别(视觉上)，而不管其中的内容。

http://jsfiddle.net/bkmorse/519xzvou/

CSS

.container {
    width: 470px;
    border:1px solid purple;
    height: 210px;
}

.box {
    width: 150px;
    height: 200px;
    border:1px solid red;
    display:inline-block;
}

html

<div class="container">
    <div class="box">
        <h1>Box 1</h1>
        <p>Content</p>
        <p>Content</p>
    </div>

    <div class="box">
        <h1>Box 2</h1>
    </div>    
    <div class="box">
        <h1>Box 3</h1>
        <p>Content</p>
        <p>Content</p>
    </div>
</div>

Answer 1

应用样式 vertical-align:top to .box在你的样式表中