根據最大div自動調整商品包裝器div的高度

Question

正如許多設計人員可能面臨的問題一樣，就是將所有包裝程序div的高度自動調整為div的最大高度。

假設我有以下結構來顯示我的博客項目

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="blog-item">
        <div class="img">IMAGE</div>
        <div class="title">SOME TITLE</div>
    </div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="blog-item">
        <div class="img"></div>
        <div class="title"></div>
    </div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="blog-item">
        <div class="img"></div>
        <div class="title"></div>
    </div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="blog-item">
        <div class="img"></div>
        <div class="title"></div>
    </div>
</div>

每個博客項目都有一個圖片，標題和日期。 標題可以是一行標題或兩行標題或三行。 這使得很難調整blog-item的高度，我們可以提供通常可以使用的max-height ，但是如果此博客項目和一個行標題會增加顯示額外的空間。 有沒有一種方法可以根據任何blog-item div所采用的最大高度來自動調整blog-item包裝器的高度。

如果我們使用max-height那么我們必須假設blog-item最大高度，否則，如果標題大於3行，則設計可能會中斷

Answer 1

該解決方案來自Ed Eliot的博客

通過添加底部填充：100％，然后使“ divs / columns”非常高，然后使用“邊距底部：-100％（或）100％”來“欺騙瀏覽器”以使其不那么高。 Ed Eliot在他的博客中對此進行了更好的解釋，其中還包括許多示例。

樣例代碼

.column {
    padding-bottom: 1000px;
    margin-bottom: -1000px;
 }

在這里演示

如果您想適應CSS3，也可以使用flex / flexbox

只需將外部div的顯示屬性設置為flex

display: flex;
align-items: stretch;

編輯： 在此處將flexbox與bootstrap 演示一起使用

Answer 2

該解決方案是通過jquery ...

http://jsfiddle.net/mkdizajn/5ztns5sf/

var maxh = 0;
$('.column').each(function(){ 
   var currh = parseInt( $(this).height() )
   if( currh > maxh ){ maxh = currh }
});
$('.column').height( maxh )

Answer 3

flexbox可以解決您的問題。

 #container { display: flex; align-items: stretch; } #container > div { border: 1px solid black; } 

  <div id="container"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="blog-item"> <div class="img">IMAGE</div> <div class="title">SOME TITLE</div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="blog-item"> <div class="img">image2</div> <div class="title">title2</div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="blog-item"> <div class="img">image3</div> <div class="title">title3</div> <div class="desc">long descriptions</div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="blog-item"> <div class="img">image4</div> <div class="title">title4</div> </div> </div> </div> 

Answer 4

我敢肯定這個問題已經被問過很多次了，但是我沒有立即看到一個能給出我所要答案的問題。

我的標准（無flexbox）解決方案是類似表格的CSS。 簡單：整行display: table ，每一列display: table-cell

就你而言

 .row { display: table; } .row > div { display: table-cell; border: 1px solid blue; } 

 <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="blog-item"> <div class="img">IMAGE</div> <div class="title">SOME TITLE</div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="blog-item"> <div class="img">image</div> <div class="title">longer <br/>title</div> </div> </div> </div> 

有關某些選項的更完整討論，請參閱https://css-tricks.com/fluid-width-equal-height-columns/