Question

我正在尝试在此示例中创建方法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>

我想知道哪些是遵循最佳的最新做法，哪些应该是最高效的。

当然，让它运转起来。因为现在我无法做到这一点。

谢谢你们。

Answer 1

最佳最新实践意味着我们可以假设您仅支持最新的浏览器。然后，您可以尝试使用CSS Flexbox属性并轻松实现。

如果不是，则必须使用表和div（显示：table属性），假设您有所有屏幕尺寸的固定行和列。

Answer 2

尝试我的解决方案，我已经实现了一个通用的方法来完成所需的工作

https://codepen.io/anon/pen/QabRQP?editors=1010

$( 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">

eq-height css或带内部div / classes的JS？

2 个答案: