Css 让孩子们跳到最高孩子的高度

我在父容器中有两个子

元素，如图所示：

<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>

如何使两个孩子（

div.item

）都达到最高孩子的高度

---

jsIDLE:

一种解决方案是将子

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

---

另一种解决方案是使用flexbox：

但是，支持是有限的（但会越来越好！）请参见

否则，您需要使用javascript手动设置高度。

jquery版本：

var maxheight = 0;

$('div div.y').each(function () {
    maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight); 
});

$('div div.y').height(maxheight);

---

编辑：刚刚注意到你不是在讨论

的高度，而是

的高度。这个问题已经被问了很多次了。看这个问题。简单。轻松。小心，表格单元格是css3，不适用于所有浏览器。实际上，

表格单元格

值是在请添加显示：表格和边框间距：20px 20px到中引入的。在您的小提琴中的行，使列更加明显，谢谢！对于那些想知道为什么这对你不起作用的人。确保您没有设置浮动规则。您可以使用

float:none

，因为有时我们使用float来消除

内联块的回车空格！考虑到它确实有效，假设我有很多子元素，当我使用
inline block
时，这些子元素被自动划分为不同的行，但现在它们都被塞进了一行。有没有解决办法。@akabhirav，是的-使用
flex-wrap:wrap；弯曲方向：行
.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;
}

var maxheight = 0;

$('div div.y').each(function () {
    maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight); 
});

$('div div.y').height(maxheight);