我正在尝试在此示例中创建方法eq-height: https://codepen.io/anon/pen/opXmMG
<div class="row">
<div class="col-lg-8">
<div> class="box">
<div class="box-head">
<h2>Title</h2>
</div>
<div> class="box-body">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div> class="box">
<div> class="box-head">
<h2>Title</h2>
</div>
<div> class="box-body">
<p>Second row</p>
<p>Second row</p>
<br>
</div>
</div>
</div>
</div>
我想知道哪些是遵循最佳的最新做法,哪些应该是最高效的。
当然,让它运转起来。因为现在我无法做到这一点。
谢谢你们。
答案 0 :(得分:0)
最佳最新实践意味着我们可以假设您仅支持最新的浏览器。然后,您可以尝试使用CSS Flexbox属性并轻松实现。
如果不是,则必须使用表和div(显示:table属性),假设您有所有屏幕尺寸的固定行和列。
答案 1 :(得分:0)
尝试我的解决方案,我已经实现了一个通用的方法来完成所需的工作
$( function(){
var HightGruplist = [];
$('*').each(function( index ) {
if ($(this).attr("HightGrup")!=null){
var TempGrup=$(this).attr("HightGrup");
console.log(TempGrup);
var Found=false;
HightGruplist.forEach(function(item,index){if (item==TempGrup){
Found=true;
}});
if (!Found){
HightGruplist.push(TempGrup);
}
}
});
HightGruplist.forEach(function(item,index){
console.log($('*[HightGrup='+item+']'));
$('*[HightGrup='+item+']').on('resize',function() {
var MaxHeght=0;
$('*[HightGrup='+item+']').each(function( index ) {
if ($(this).height()>MaxHeght) MaxHeght = $(this).height();
});
console.log(MaxHeght);
$('*[HightGrup='+item+']').height(MaxHeght);
});
});
});
$(function() {$('*[HightGrup]').resize();});
你只需要用
定义对象组 HightGrup="mygrup1"
ES
<div class="box-header accent" HightGrup="mygrup1">