Jquery 根据最大div自动调整项目包装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">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

div的最大高度自动调整

blog item

wrapper的高度

---

如果我们使用

max height

，那么我们必须假设

博客项目的最大高度

，否则，如果标题大于3行，设计可能会中断

flexbox

可以解决您的问题

#容器{
显示器：flex；
对齐项目：拉伸；
}
#容器>分区{
边框：1px纯黑；
}

形象
一些头衔
图2
标题2
图3
标题3
长描述
图4
标题4

我肯定这个问题已经被问过很多次了，但我没有立即看到一个问题给出我想要的答案

我的标准（flexboxless）解决方案是类似表格的css。简单：整行获取

display:table

，每列获取

display:table单元格

就你而言

.row{
显示：表格；
}
.行>分区{
显示：表格单元格；
边框：1px纯蓝色；
}

形象
一些头衔
形象
比较长的

标题

此解决方案来自

通过添加填充底：100%使div/columns非常非常高，然后使用margin-bottom:-100%（或）100%使“欺骗浏览器”认为它们没有那么高。埃德·艾略特在他的博客上对此做了更好的解释，其中还包括许多例子

示例代码

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

如果要调整CSS3，也可以使用flex/flexbox

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

display: flex;
align-items: stretch;

---

编辑：将flexbox与引导一起使用

此解决方案通过jquery

---

值得注意的是，如果像素与旧IE版本的完美兼容性不是至关重要的，那么这个任务就是。

flexbox

可以解决您的问题。

flexbox

是

CSS3

。由于OP没有添加

CSS3

标记，我没有建议。您介意js解决方案吗？这就是我试图避免的。。。jquery。。但也不排除。我意识到我是在假设它们是一条直线，基于看起来像“列”的类名。如果你说的是高度相同，但不是一排在一起，那是一个完全不同的问题，它在引导中也会中断。你给它加了bootstrap标签，但你也给它加了jquery标签。两者都不是实现你所描述的目标的必要条件。据我们所知，您最终使用bootstrap只是为了解决这个问题。而且，它不会在引导过程中中断；）还有其他微调要做，但高度问题已经解决（使用引导）解决方案的问题是它会打断引导列，并在一行中显示所有引导列。@KnowledgeSeeker您是否尝试过

flex wrap

属性<代码>柔性包裹：包裹是的，它还破坏了引导列结构。Flex正在破坏引导模板中的列，并在一行中显示所有列。@KnowledgeSeek您尝试过Ed博客中提到的其他方法吗？@KnowledgeSeek查看编辑以了解flexbox与引导的示例用法

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