I have 2 divs (6 columns each). In the div on the left is an image, in the div on the right is some quote. I want my right div's height to be the same as height of image.
Here is my code: http://codepen.io/matysflance/pen/PZXdBK
<div id="testimonials" class="container-fluid testimonials">
<div class="row">
<div class="col-lg-6 image">
<img src="http://placehold.it/1100x700/f3e42a" alt="">
</div>
<div class="col-lg-6 quote">
<blockquote>
<p>"Integer posuere erat a ante venenatis dapibus posuere veit al..." </p>
<cite>Susan Sims, Interaction Designer at XYZ</cite>
</blockquote>
</div>
</div>
</div>
You can do this using jQuery
Just add the class same-height
to the DIV´s you want to have the same height
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);
});
You can make the container of both divs a flexbox, which will automatically apply equal heights to the child elements.
Try this:
.row { display: flex; }
By making .row
a flex container, the children ( .image
and .quote
) become flex items, and share equal height by default. See here for more details: https://stackoverflow.com/a/33815389/3597276
use jQuery or plain Java Script. Just take the height of the desired element and set it to the one you need to edit. $( ".col-lg-6 quote" ).height($( ".col-lg-6 image" ).height())
Hope it helps.
Simply:
var heightImgDiv = $('.ImgDiv').height(); $('.Div').height(heightImgDiv );
div { background: red; float: left; width: 250px; margin: 0 10px 0 10px; } img { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ImgDiv"><img src="https://fallbacks.carbonads.com/nosvn/fallbacks/4cd1acdff7348a672d30bb3326800d80.jpeg"/></div> <div class="Div"></div>
A similar question has been answered here
For your convenience I will write the answer here also.
Flexbox
With flexbox it's a single declaration:
.row { display: flex; /* equal height of the children */ } .col { flex: 1; /* additionally, equal width */ padding: 1em; border: solid; }
<div class="row"> <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> <div class="col">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.</div> </div>
Table layout
If you still need to support IE 8 or 9, then you have to use table layout:
.row { display: table; } .col { display: table-cell; width: 50%; /* depends on the number of columns */ padding: 1em; border: solid; }
<div class="row"> <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> <div class="col">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.</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.