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

回答

相關問題