Question

我有一个包含大量行和列的html结构。现在我希望同一行中的所有列具有相同的高度。

我制作了一个做equHeight的脚本。但是这个脚本在所有列上都有相同的高度。您可以在下面找到html和脚本。

我做错了什么？谢谢你的帮助！

<div class="row">
    <div class="column">

    </div><!-- /column -->
    <div class="column">

    </div><!-- /column -->
</div><!-- /row -->
<div class="row">
    <div class="column">

    </div><!-- /column -->
    <div class="column">

    </div><!-- /column -->
    <div class="column">

    </div><!-- /column -->
</div><!-- /row -->

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).outerHeight();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
};

equalHeight($('.row .column'));

Answer 1

采用此脚本http://jsfiddle.net/mmSeU/2/

function equalHeight(group) {
$(group).each(function(i,eachrow) {
       tallest = 0;
                      $(eachrow).children('.column').each(function(j,eachcolumn) {
          thisHeight = $(eachcolumn).outerHeight();
          if(thisHeight > tallest) {
             tallest = thisHeight;
          }
       });
       $(eachrow).children('.column').height(tallest);
    });};equalHeight($('.row'));

行和列上的equalHeight

1 个答案: