根据最大的 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通常有效，但如果此博客项目和一行标题，则添加显示额外空间。有没有办法我们可以根据div 采取的任何blog-item的最大高度自动调整包装器blog-item高度。

如果我们使用max-height那么我们必须假设blog-item的最大高度，否则如果标题大于 3 行，设计可能会中断

Answer 1

这个解决方案是通过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 2

此解决方案来自 Ed Eliot 的博客

通过添加底部填充：100

%使div/列非常高，然后使用底部边距：-100%（或）100%（或）100%"欺骗浏览器"认为它们没有那么高。Ed Eliot在他的博客上对此进行了更好的解释，其中还包括许多示例。

示例代码

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

在这里演示

如果你想适应CSS3，你也可以使用flex/flexbox

。

只需将外部div的显示属性设置为flex

display: flex;
align-items: stretch;

编辑：在这里使用带有引导演示的弹性框

Answer 3

我相信这已经被问了很多次，但我没有立即看到一个给出我正在寻找的答案的问题。

我的标准（无弹性框）解决方案是类似表格的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/

Answer 4

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>