Высота равного div, выровненный максимум div

Question

Как установить зеленые divs равны, выровненный высший div? Divs содержит текст разной длины. Красные и синие divs всегда одинаковой высоты. Оранжевые divs col-xs-12 col-sm-4 col-md-3 и должны быть одинаковой высоты. Я понятия не имею.

Answer 1

В Stackoverflow вы должны отправить то, что уже делали, когда у вас есть проблема.

Тогда мы поможем вам.

Я реализовал Responsive Equal Height Divs (codepen.io) с вашим изображением.

Я обнаружил также, что: a responsive equal heights plugin for jQuery

(function($) { 
 
    var equalheight = function(container) { 
 

 
    var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; 
 
    $(container).each(function() { 
 

 
    $el = $(this); 
 
    $($el).height('auto') 
 
    topPostion = $el.position().top; 
 

 
    if (currentRowStart != topPostion) { 
 
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
 
     rowDivs[currentDiv].height(currentTallest); 
 
     } 
 
     rowDivs.length = 0; 
 
     currentRowStart = topPostion; 
 
     currentTallest = $el.height(); 
 
     rowDivs.push($el); 
 
    } else { 
 
     rowDivs.push($el); 
 
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); 
 
    } 
 
    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { 
 
     rowDivs[currentDiv].height(currentTallest); 
 
    } 
 
    }); 
 
    } 
 
    $(window).load(function() { 
 
    equalheight('.column-block .column-block-content'); 
 
    }); 
 
    $(window).resize(function(){ 
 
    equalheight('.column-block .column-block-content'); 
 
    }); 
 
})(jQuery);

.column-block { 
 
    width: 30% !important; // Hack just for good display in stackoverflow :D 
 
} 
 
.column-block-head { 
 
    background: red; 
 
    height: 40px; 
 
} 
 

 
.column-block-content { 
 
    background: green; 
 
} 
 

 
.column-block-foot { 
 
    background: blue; 
 
    height: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="column-block col-xs-12 col-sm-4 col-md-3"> 
 
    <div class="column-block-head"> 
 
    </div> 
 
    <div class="column-block-content"> 
 
     Foobar<br> 
 
    </div> 
 
    <div class="column-block-foot"> 
 
    </div> 
 
    </div> 
 
    <div class="column-block col-xs-12 col-sm-4 col-md-3"> 
 
    <div class="column-block-head"> 
 
    </div> 
 
    <div class="column-block-content"> 
 
     Foobar<br> 
 
     Foobar<br> 
 
    </div> 
 
    <div class="column-block-foot"> 
 
    </div> 
 
    </div> 
 
    <div class="column-block col-xs-12 col-sm-4 col-md-3"> 
 
    <div class="column-block-head"> 
 
    </div> 
 
    <div class="column-block-content"> 
 
     Foobar<br> 
 
     Foobar<br> 
 
     Foobar<br> 
 
     Foobar<br> 
 
     Foobar<br> 
 
    </div> 
 
    <div class="column-block-foot"> 
 
    </div> 
 
    </div> 
 
</div>