让孩子div的最高孩子

的高度，我有两个孩子<div>元素父容器<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/

来源

2013-05-16 Don P

这个问题已经被问进行多次。看到这个问题。 http://stackoverflow.com/questions/16592597/issue-with-responsive-columns-having-equal-height – Cam

简单。简单。 [带有Flexbox的等高柱]（http://stackoverflow.com/a/33815389/3597276）。 –

一种解决方案是从inline-block显示值改变为table-cell为后代div.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; 
}

Example

来源

2013-05-16 18:38:56 Yana

小心，table-cell是一个css3，不适用于所有浏览器。 – Cam

实际上'table-cell'值是在[CSS 2.1 Specification]中引入的（http://www.w3.org/TR/CSS2/visuren.html#display-prop） – Yana

请添加display：table和border-间距：20px 20px到您的小提琴中，使列更加明显，谢谢！ http://jsfiddle.net/audetwebdesign/7m4f7/5/ –

另一种解决方案是使用Flexbox的：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来手动设置高度。

来源

2013-05-16 18:42:25 nullability

考虑到它的工作原理，假设我有很多子元素在我使用'inline-block'时被自动分成不同的行，但现在它们都被塞进一行。有没有解决这个问题的方法。 – akabhirav

@akabhirav，是的 - 使用'flex-wrap：wrap; flex-direction：row;' – crishoj

jQuery的版本：FIDDLE

var maxheight = 0; 

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

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

编辑：只注意到你不处理的<div>高度的，但<p>的

来源

2013-05-16 19:02:21 fnostro

让孩子div的最高孩子

回答

相关问题