等于div的高度，对齐最高div

Question

如何设置绿色div等于，对齐最高div？ Div包含不同长度的文本。红色和蓝色div总是相同的高度。橙色div是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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;