Haga que los niños divs la altura del niño más alto

Tengo dos elementos secundarios

dentro de un contenedor primario

como se muestra:

 

Sup?

Sup?

Wish that other guy was the same height as me

Intenté el siguiente CSS:

 .item { background: rgba(0,0,0,0.1); display: inline-block; } .row { border: 1px solid red; } 

¿Cómo puedo obtener ambos hijos ( div.item ) para ser la altura del niño más alto?

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

Una solución es cambiar el valor de visualización de inline-block a table-cell para los elementos de div.item descendientes:

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

Ejemplo

Otra solución es usar 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; } 

Sin embargo, el soporte es limitado (¡pero cada vez mejor!) Consulte http://caniuse.com/flexbox

De lo contrario, necesita usar javascript para establecer las alturas manualmente.

versión jquery: FIDDLE

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

EDITAR: Acabo de notar que no se trata de la altura de

, pero

‘s