[英]Equal height for two divs
我有2個div(每個6列)。 在左邊的div是一個圖像,右邊的div是一些引用。 我希望我的正確div的高度與圖像的高度相同。
這是我的代碼: 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>
你可以使用jQuery來做到這一點
只需將類same-height
添加到想要具有相同高度的DIV即可
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);
});
您可以將兩個div的容器設置為flexbox,它將自動將相等的高度應用於子元素。
嘗試這個:
.row { display: flex; }
通過使.row
一個Flex容器,子項( .image
和.quote
)成為彈性項目,默認情況下共享相同的高度。 有關更多詳細信息,請參見此處: https : //stackoverflow.com/a/33815389/3597276
使用jQuery或普通的Java Script。 只需獲取所需元素的高度並將其設置為您需要編輯的元素。 $( ".col-lg-6 quote" ).height($( ".col-lg-6 image" ).height())
希望能幫助到你。
只是:
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>
為方便起見,我也會在這里寫下答案。
Flexbox的
使用flexbox,它只是一個聲明:
.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>
表格布局
如果您仍然需要支持IE 8或9,那么您必須使用表格布局:
.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.