forxtu
7/21/2017 - 7:41 AM

The same height of columns - jQuery

The same height of columns - jQuery

/* The same height of the columns */
function setEqualHeight(columns){
    var tallestcolumn = 0;
    columns.each(
        function(){
            currentHeight = $(this).height();
            if(currentHeight > tallestcolumn){
                tallestcolumn = currentHeight;
            }
        }
    );
    columns.height(tallestcolumn);
}
$(document).ready(function() {
    setEqualHeight($(".wrapper > .item-wrap"));
});
<div class=”wrapper”>
  <div class=”item-wrap”> … Lots Of Content … </div>
  <div class=”item-wrap”> …. Lots Of Content … </div>
  <div class=”item-wrap”> … Lots Of Content … </div>
</div>
.wrapper {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.item-wrap {
  float: left;
  width: 33%;
}