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

-3

如何设置绿色div等于，对齐的最高div？ Divs包含不同长度的文本。红色和蓝色的div总是相同的高度。橙色的div是col-xs-12 col-sm-4 col-md-3，并且应该是相同的高度。我不知道。等于div的高度，对齐的最高div

来源

2015-10-06 Bejkrools

请发表您的当前执行的代码。我们会改进它并为您找到解决方案。 –

就像这样 - http://stackoverflow.com/a/32587019/1355315。忽略该答案的编辑。并且在该答案的第一部分中也忽略了“保证金”。休息和你的用例完全一样。 – Abhitalks

@Abhitalks如果是这样的话，为什么不发表一个更新的代码，而不是发表评论的答案 – NooBskie

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

来源

2015-10-06 13:08:52

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

回答

相关问题