響應和高度相等的一組的箱

Question

有三個框在一條線上，每一個包含圖像和標題。 我可以使用height屬性來使它們的高度相等。但在響應式視圖中，當盒子縮小時，由於高度固定，盒子會在標題之後帶有額外的空白區域（特別是當標題填滿一行而不是兩個時）。

我可以使用padding-bottom ，但它不會給我的盒子高度相等，因爲有些人的標題更長，並且會填充兩行而不是一行，所以會有更高的高度。

這些箱子的高度相等的解決方案是什麼？在響應視圖中收縮時，不會讓我獲得額外的空白空間嗎？

Answer 1

，如果你使用jquery此代碼添加到您的頁面的底部：

var max=0; 
$('article').each(function(){ 
    if($(this).height()>max) 
     max=$(this).height(); 
}); 
$('article').height(max); 

Answer 2

使用溢出：隱藏和高度的箱子（包含元素的文字父）：

<div style="overflow:hidden;height:150px;"> 

編輯： http://jsfiddle.net/G4PvQ/2/

Answer 3

爲了解決這個問題變化height財產與min-height WH ich使您的框可自動調整大小，並添加padding-bottom，以根據需要增加底部空白區域。

Answer 4

你的這個問題是一個可以通過CSS解決方案解決的非常規問題，但你應該謹慎地選擇你需要的解決方案。

Chris Coyier發表了一篇關於使用4種不同CSS方法的等高寬度流體項目的文章，如果您不關心瀏覽器支持，我個人喜歡FlexBox方法。

文章：http://css-tricks.com/fluid-width-equal-height-columns/
演示：http://css-tricks.com/examples/FluidEqualHeightFauxColumns/

樂趣。