Hauteur égale pour deux divs

J’ai 2 divs (6 colonnes chacun). Dans le div à gauche se trouve une image, dans le div à droite, une citation. Je veux que la hauteur de ma droite soit la même que la hauteur de l’image.

entrez la description de l'image ici

Voici mon code: http://codepen.io/matysflance/pen/PZXdBK

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

Susan Sims, Interaction Designer at XYZ

Vous pouvez le faire en utilisant jQuery

Ajoutez simplement la classe de same-height aux DIV que vous voulez avoir la même hauteur

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

Vous pouvez transformer le conteneur des deux divs en une boîte souple, qui appliquera automatiquement des hauteurs égales aux éléments enfants.

Essaye ça:

 .row { display: flex; } 

Codepen révisé

En faisant de .row un conteneur flex, les enfants ( .image et .quote ) deviennent des éléments flex et partagent une hauteur égale par défaut. Voir ici pour plus de détails: https://stackoverflow.com/a/33815389/3597276

utilisez jQuery ou un script Java simple. Il suffit de prendre la hauteur de l’élément souhaité et de la définir sur celle que vous devez modifier. $( ".col-lg-6 quote" ).height($( ".col-lg-6 image" ).height())

J’espère que ça aide.

Simplement:

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

Une question similaire a été répondu ici

Pour votre commodité, j’écrirai la réponse ici aussi.

Flexbox

Avec flexbox c’est une seule déclaration:

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