Fai diventare i bambini l’altezza del bambino più alto

Ho due elementi

figlio all’interno di un contenitore genitore

come mostrato:

  

Ho provato il seguente CSS:

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

Come posso far div.item entrambi i bambini ( div.item ) siano l’altezza del bambino più alto?

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

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

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

Esempio

Un’altra soluzione è usare 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 sta migliorando!) Vedi http://caniuse.com/flexbox

Altrimenti è necessario utilizzare javascript per impostare manualmente le altezze.

versione jquery: FIDDLE

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

EDIT: Ho notato che non hai a che fare con l’altezza di

, ma