rendere i bambini div l'altezza del bambino più alto

Question

Ho due bambini <div> elementi all'interno di un contenitore padre <div> come mostrato:

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

ho provato il seguente CSS:

.item { 
    background: rgba(0,0,0,0.1); 
    display: inline-block; 
} 

.row { 
    border: 1px solid red; 
} 

Come posso ottenere entrambi i bambini (div.item) sono l'altezza del bambino più alto?

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

Answer 1

Una soluzione consiste nel modificare il valore di visualizzazione da inline-block a table-cell per i discendenti div.item elementi:

.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

Un'altra soluzione consiste nell'utilizzare 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; 
} 

Tuttavia, il supporto è limitato (ma sempre meglio!) Vedi http://caniuse.com/flexbox

In caso contrario è necessario utilizzare javascript per impostare manualmente le altezze.

Answer 3

versione jQuery: FIDDLE

var maxheight = 0; 

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

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

EDIT: appena notato che non ha a che fare con l'altezza del <div> 's, ma <p>' s