行ごとに等しい高さの列

Question

私は自分のサイトにブートストラップを使用しています。そして、各列を最も高い列の高さにするためにいくつかのjQueryを追加しました。これは問題なく動作しますが、高さは行に固有ではないという問題があります。したがって、高さはページ全体を通して最も高い要素に設定されます。行の各要素が同じ行の中で最も高い要素に設定されるように、このコードを変更するにはどうすればよいですか？

$(function() { 
 
    function equalHeight(group) { 
 
     var maxHeight = 0; 
 
     group.each(function() { 
 
      $(this).removeAttr('style'); 
 
      maxHeight = Math.max(maxHeight, $(this).height()); 
 
     }); 
 
     group.css({ height: maxHeight + 'px' }); 
 
    } 
 
    equalHeight($('.equal')); 
 
});

.equal { 
 
background:yellow; 
 
margin-bottom:40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-3 equal"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    </div> 
 
    <div class="col-sm-3 equal"> 
 
    Donec consequat malesuada sapien sit amet lacinia. In faucibus, felis nec condimentum volutpat, ante felis dictum dui, eget tincidunt arcu risus id nisl. Suspendisse faucibus neque at massa elementum, id porta nunc semper. 
 
    </div> 
 
    <div class="col-sm-3 equal"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum odio velit, in tempus purus posuere eget. 
 
    </div> 
 
    <div class="col-sm-3 equal"> 
 
    <strong>ALL HEIGHTS ARE BASED ON THIS COLUMN: </strong>Sed sodales augue sed est vulputate gravida. Mauris rutrum, felis vitae tincidunt fermentum, ipsum ipsum porta felis, quis cursus tortor metus in sapien. In at eros malesuada, facilisis enim eget, volutpat tellus. In accumsan odio in urna suscipit auctor. Integer iaculis leo sit amet felis consectetur sodales. Nulla lobortis nec justo at fermentum. Donec efficitur in est eu volutpat. Etiam sed felis id lorem pretium auctor. Aenean placerat, neque ac posuere feugiat, justo ex gravida ante, et semper diam velit eu dolor. Duis efficitur maximus odio, viverra imperdiet odio dictum vitae. 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-3 equal"> 
 
    Cras dignissim eget enim et auctor. 
 
    </div> 
 
    <div class="col-sm-3 equal"> 
 
    Mauris massa quam, tincidunt in nulla gravida, viverra vulputate est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    </div> 
 
    <div class="col-sm-3 equal"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    </div> 
 
    <div class="col-sm-3 equal"> 
 
    Nulla venenatis pharetra sapien, et lobortis diam commodo rutrum. Sed varius sit amet lectus ac condimentum. Maecenas lacinia ligula eget ultricies dictum. Proin a eros velit. Sed facilisis vehicula mauris, nec egestas augue vulputate ac. 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

CSSのソリューション：

あなたはdisplay: flexに親divを設定することができます。この場合、CSSはそうのようになります。

.row { 
    display: flex; 
} 

例：https://jsfiddle.net/koralarts/e50wonqz/

Javascriptのソリューション：Javascriptのソリューションで

、私はクラスequalでrowsの各を通じてループ前記クラスを用いてcolumnsをループすることに反対する。

これはcolumnsの代わりにrowの範囲内にあることを確認します。

function equalizeHeight(group) { 
    var maxHeight = 0; 
    group.each(function(index) { 
    var divHeight = $(this).height(); 
    if(divHeight > maxHeight) { 
     maxHeight = divHeight; 
    } 
    }); 

    group.css('height', maxHeight); 
} 

この関数はそうのように呼び出すことができます。

$('.equal').each(function() { 
    equalizeHeight($(this).children('div')); 
}); 

https://jsfiddle.net/koralarts/e50wonqz/4/

Answer 2

のjQuery

でプラグイン

https://github.com/mattbanks/jQuery.equalHeightsこれをチェックアウトがあります。

$('.equal').equalHeights();