每行高度相等的列

Question

我在我的網站上使用Bootstrap，並且添加了一些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解決方案：

可以div設置父display: flex。在這種情況下，CSS看起來就像這樣：

.row { 
    display: flex; 
} 

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

JavaScript解決方案：

在JavaScript的解決方案，我通過每個rows的環帶班equal爲反對通過columns循環與所述類。

這將確保我們的範圍在row之內，而不是所有可用的columns。

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();