css - 让 child 成为最高 child 的高度

Question

我有两个 child <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;
}

如何让两个 child ( div.item ) 成为最高 child 的高度？

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

Answer 1

一种解决方案是将后代 div.item 元素的显示值从 inline-block 更改为 table-cell:

.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;
}

Example