Как задать всем блокам высоту, как у самого низкого из них?

#html #css

Есть контейнер, а в нем 3 блока с разной высотой. Высота блока зависит от контента. 

Как задать всем блокам высоту, как у самого низкого из них?

jsfiddle



.wrapper{
  width:600px;
  height:200px;
  background:lightgrey;
}
.item{
  width:200px;
  float:left;
}
.item:nth-child(1){
  background:red;
}
.item:nth-child(2){
  background:green;
}
.item:nth-child(3){
  background:blue;
}

  
content content content content content content content content
content content content content content content content content content content content
content content content content content
  
content content contentcontent content contentcontent content
content
  
content content contentcontent content contentcontent content
contentcontent content contentcontent content content




    

Ответы

Ответ 1

$(document).ready(function() {
    var allDivs = $('.item');
    var dvSmallest = allDivs[0];
    $(allDivs).each(function() {
        if ($(this).height() < $(dvSmallest).height()) 
            dvSmallest = $(this);
    });
    $('.item').height(dvSmallest.height());
});
.wrapper{
  width:620px;
  height:200px;
  background:lightgrey;
}
.item{
  width:200px;
  float:left;
  overflow:auto;
}
.item:nth-child(1){
  background:red;
}
.item:nth-child(2){
  background:green;
}
.item:nth-child(3){
  background:blue;
}


  
content content content content content content content content
content content content content content content content content content content content
content content content content content
  
content content contentcontent content contentcontent content
content
  
content content contentcontent content contentcontent content
contentcontent content contentcontent content c324ontent





Как-то так


Ответ 2

$(document).ready(function() {
   var arr = [];
   $('.item').each(function(){
 	  arr.push($(this).height()); 
   });

   $('.item').height(Math.min.apply(Math, arr)); 
});
.wrapper{
  width:600px;
  height:200px;
  background:lightgrey;
}
.item{
  width:200px;
  float:left;
}
.item:nth-child(1){
  background:red;
}
.item:nth-child(2){
  background:green;
}
.item:nth-child(3){
  background:blue;
}


  
content content content content content content content content
content content content content content content content content content content content
content content content content content
  
content content contentcontent content contentcontent content
content
  
content content contentcontent content contentcontent content
contentcontent content contentcontent content content



Ответ 3

Если самый низкий, вы имеете ввиду по расположению, то можно сверстать на флексах:



.wrapper{
  width:600px;
  height:200px;
  display:flex;
  background:lightgrey;
}
.item{
  width:200px;
}
.item:nth-child(1){
  background:red;
}
.item:nth-child(2){
  background:green;
}
.item:nth-child(3){
  background:blue;
}

  
content content content content content content content content
content content content content content content content content content content content
content content content content content
  
content content contentcontent content contentcontent content
content
  
content content contentcontent content contentcontent content
contentcontent content contentcontent content content