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