我刚开始学习,请耐心等待我的回答,我会尽力提供尽可能多的信息。
使用Bootstrap 3,我一直在尝试调整多个内容区域,使它们具有相同的高度。 我每行有4个内容区域,并且列数不确定(我正在通过php数组进行循环以确定这一点)。 基本上,无论我需要显示多少个内容区域,它们都应该使用相同的高度,或者至少与它所在行的其他三个内容区域使用相同的高度。
我一直在使用这个jquery库>https://github.com/mattbanks/jQuery.equalHeights >,它非常好用,但每当我调整页面大小时,内容区域的高度都不会更新(如果我将屏幕拖到新的尺寸并刷新,则高度会重新调整为正确的位置)。
我还看过其他一些解决方案,例如>Twitter Bootstrap - Same heights on fluid columns,但是对于多行情况,该解决方案似乎不起作用。
任何帮助都将不胜感激,无论我是否应该使用JavaScript解决方案,或者是否可以通过CSS进行任何操作。请记住,我需要高度始终保持一致,并在屏幕大小调整时重新调整。 我更喜欢使用Bootstrap 3,但如果有2的解决方案可用,我将使用该版本。
<div class = "container">
<div class="row">
<div id="equalheight">
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
<div class="info-block"><!-- BODY BOX-->
<p>one line of copy</p>
</div>
</div>
</div>
</div>
以上是我的HTML代码,第二个内容区域包含大量的文字
<script>
$('#equalheight div').equalHeights();
</script>
<script>
$(window).resize(function(){
$('#equalheight div').equalHeights();
});
$(window).resize();
</script>
上面是我的JavaScript,调用之前提到的库。谢谢任何帮助/建议。