如何在不使用margin-bottom的情况下使两者处于相同的高度:-999px?
我更多地使用jquery来控制高度而不是使用css技巧。我试过保证金底部:-999px,它只是搞得一团糟。
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="content-box">
<h4>Vision</h4>
<p>Global leader in ensuring quality learning in the Financial Services Industry.</p>
</div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="content-box">
<h4>Mission</h4>
<p>Finance Accreditation Agency (FAA) is an international and independent quality assurance and accreditation body for the Financial Services Industry (FSI) supported by Bank Negara Malaysia and Securities Commission Malaysia (SC). It is responsible for quality assurance of learning initiatives within the FSI, including programme accreditation, institutional audits and programme evaluation.</p>
</div>
</div>
</div>
</div>
答案 0 :(得分:3)
计算最高div然后强制div具有相同的高度。
$(document).ready(function(){
$('.container-fluid').each(function(){
var highestBox = 0;
$(this).find('.content-box').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
})
$(this).find('.content-box').height(highestBox);
});
});
答案 1 :(得分:1)
使用jQuery,您可以使用 height() :
$('.content-box').each(function() {
$(this).height($(this).parent().next().height());
});
<强> Updated Fiddle 强>
或者,如果要将第一个框高度设置为等于第二个框高度,请使用:
$('.content-box:eq(0)').height($('.content-box:eq(1)').height());
<强> Updated Fiddle 强>
答案 2 :(得分:0)
另一种方式......这可能不是最好的。但这很有效。
我为每个内容框提供id和
并使用此jquery
var cb1_height = $("#cb1").outerHeight();
var cb2_height = $("#cb2").outerHeight();
if(cb1_height>cb2_height)
{
$(".content-box").height(cb1_height);
}else
{
$(".content-box").height(cb2_height);
}