сделать ребенок DIVS высоты самого высокого ребенка

Question

У меня есть два ребенок <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

Одно из решений состоит в изменении значения дисплея от 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

Answer 2

Другим решением является использование 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, чтобы установить высоту вручную.

Answer 3

версия JQuery: FIDDLE

var maxheight = 0; 

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

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

EDIT: Просто заметил, что вы не имеем дело с высотой <div> годов, но <p> 's