让孩子划分最高的孩子的身高
问题描述：
我在父容器< div> 中有两个子< div>
I have two child <div> elements inside of a parent container <div> as shown:
<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
How can I get both children (div.item) to be the height of the tallest child?
jsFiddle： http://jsfiddle.net/7m4f7/
jsFiddle: http://jsfiddle.net/7m4f7/
答
一个解决方案是更改对于后代 div.item 的显示值从 inline-block 到 table-cell / code>元素：
One solution is to change the display value from inline-block to table-cell for the descendant div.item elements:
.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;
}