Altura igual para dos divs

Tengo 2 divs (6 columnas cada uno). En el div a la izquierda hay una imagen, en el div a la derecha hay alguna cita. Quiero que la altura de mi div correcto sea la misma que la altura de la imagen.

enter image description here

Aquí está mi código: http://codepen.io/matysflance/pen/PZXdBK

"Integer posuere erat a ante venenatis dapibus posuere veit al..."

Susan Sims, Interaction Designer at XYZ

Puedes hacer esto usando jQuery

Solo agregue la clase de la same-height a las DIV que desea para tener la misma altura

jQUERY

 jQuery(document).ready(function($) { //noconflict wrapper var heights = $(".same-height").map(function() { return $(this).height(); }).get(), maxHeight = Math.max.apply(null, heights); $(".same-height").height(maxHeight); }); 

Puede hacer que el contenedor de ambos divs sea un flexbox, que aplicará automáticamente la misma altura a los elementos secundarios.

Prueba esto:

 .row { display: flex; } 

Codepen revisado

Al hacer .row un contenedor flexible, los elementos .image ( .image e .quote ) se convierten en elementos flexibles y comparten la misma altura de forma predeterminada. Vea aquí para más detalles: https://stackoverflow.com/a/33815389/3597276

use jQuery o Java Script. Simplemente tome la altura del elemento deseado y configúrelo como el que necesita editar. $( ".col-lg-6 quote" ).height($( ".col-lg-6 image" ).height())

Espero eso ayude.

Simplemente:

  var heightImgDiv = $('.ImgDiv').height(); $('.Div').height(heightImgDiv ); 
 div { background: red; float: left; width: 250px; margin: 0 10px 0 10px; } img { display: block; } 
  

Una pregunta similar ha sido respondida aquí

Para su conveniencia, escribiré la respuesta aquí también.

Flexbox

Con flexbox es una statement única:

 .row { display: flex; /* equal height of the children */ } .col { flex: 1; /* additionally, equal width */ padding: 1em; border: solid; } 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.