css - 子の div を最も背の高い子の高さにする

Question

次のように、親コンテナー内に2 つの子<div>要素があり<div>ます。

<div class="row">
    <div class="item">
        <p>Sup?</p>
    </div>
    <div class="item">
        <p>Sup?</p>
        <p>Wish that other guy was the same height as me</p>
    </div>
</div>

次のCSSを試しました：

.item {
    background: rgba(0,0,0,0.1);
    display: inline-block;
}

.row {
    border: 1px solid red;
}

div.item両方の子供 ( ) を一番背の高い子供の身長にするにはどうすればよいですか?

jsFiddle: http://jsfiddle.net/7m4f7/

Answer 1

1 つの解決策は、子孫要素の表示値を から に変更することinline-blockです。table-celldiv.item

.row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px; /* For controlling spacing between cells... */
}
.item {
    background: rgba(0,0,0,0.1);
    display: table-cell;
}

例

Answer 2

別の解決策は、フレックスボックスを使用することです: http://jsfiddle.net/7m4f7/4/

.item {
    background: rgba(0,0,0,0.1);
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.row {
    border: 1px solid red;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

ただし、サポートは制限されています (ただし、改善されています!) http://caniuse.com/flexboxを参照してください。

それ以外の場合は、javascript を使用して高さを手動で設定する必要があります。