內聯塊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應用於樣式表中的.box

Answer 2

使它們像table-cell一樣顯示也可以自動適應其高度和位置：

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

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

Answer 3

您可以在父類顯示中使用CSS 3屬性：-webkit-box; -webkit-box-orient：水平;

[jsfiddle] [1]

[1]: http://jsfiddle.net/519xzvou/4/