Task: make height of div's in row equal to etalon.

Algorithm:

  1. Define etalon container(div) and count it's height;
  2. Set height of etalon div to other div's.

jQuery

$(document).ready(function() {
  // Define etalon block
  countHeight("col-1", $("#col-1").height()); // count etalon block height, to this value we will equalate height of other blocks
});

/*
In this function we define blocks, which height height we want equalate to etalon block
*/
function countHeight(ele, h) {
  $("#col-2").css("height", + h + "px");
  $("#col-3").css("height", + h + "px");
}

html

<div id="col-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur justo tortor, luctus id commodo blandit, consectetur at magna. Nulla facilisi. Nam tristique justo eget ex porta suscipit. Phasellus semper et leo ultrices ornare. Fusce viverra gravida fermentum. Praesent ultricies at dui ut molestie. Fusce vel sem a ex faucibus tempus. In quis risus non erat vulputate congue ut at leo. Donec hendrerit nulla nec libero malesuada pellentesque. Duis elit lectus, iaculis at ipsum a, finibus facilisis neque. Mauris id dolor lacinia, semper urna et, molestie nunc. Donec ac pharetra felis. Proin maximus id diam in fringilla.
</div>

<div id="col-2">
Curabitur elementum justo eros, nec laoreet justo venenatis a. Sed in ex lectus. Cras eu faucibus erat, sed faucibus arcu. Cras orci metus, rutrum id viverra quis, tempus sed orci. Proin dictum a turpis et consequat. Praesent luctus fringilla risus in fringilla. Quisque pretium nibh et risus finibus, vitae pretium leo tincidunt.
</div>

<div id="col-3">
Curabitur elementum justo eros, nec laoreet justo venenatis a. Sed in ex lectus. Cras eu faucibus erat, sed faucibus arcu. Cras orci metus, rutrum id viverra quis, tempus sed orci. Proin dictum a turpis et consequat. Praesent luctus fringilla risus in fringilla. Quisque pretium nibh et risus finibus, vitae pretium leo tincidunt.
</div>

less

div {
  margin-right: 10px;
  padding: 5px;
  
  &:last-child {
    margin-right: 0;
  }
}

#col-1,
#col-2,
#col-3 {
  float: left;  
  width: 20%;  
  border: 1px solid;  
}

See the Pen Equalate block jQuery by DeN (@m5studio) on CodePen.


Выразить благодарность

Если эта публикация оказалась для Вас полезной и вы хотите выразить свою благодарность, сделайте пожалуйста её репост в социальных сетях или на своём сайте.

Так же, Вы можете перевести любую сумму, которую посчитаете нужной на наш счёт, что сильно мотивирует к написанию новых полезных статей.

Комментарии: