Jquery 如何从卡片或类似物品中获取标题，以便与flex box具有相同的高度？

请不要黑客

没有硬编码。我们的想法不是针对一种情况（例如，有4列的情况）进行解决，而是针对动态内容和响应屏幕大小进行解决

我的问题是，它基本上不是直接的孩子，而是它的内容

代码笔在这里：

HTML

我想要什么

蓝色标题的大小始终与当前行中的所有元素相同

一个可靠的jquery解决方案也不错。。。但它必须是傻瓜式的，并且可以调整大小。html结构的一般变化也很好。但必须正确回应

因此，这（通过硬编码实现，而不是响应）：

---

基本上有两种方法可以实现这一点，CSS方法

还有脚本方式，这里使用jQuery

---

第一个脚本示例显示如何在所有项目上设置相等高度

第二个示例设置了每行相等的高度，实现此功能的方法是检查项目的顶部值（它会为新行更改）并为每个处理的范围/行设置高度

我还添加了一些优化，预加载项，所以如果只有一个项或列，它将不会处理它们

---

堆栈代码段1

（函数（$）{
//预加载对象数组以获得性能
变量$headers=$（'.header'）
//以调整大小的速度运行
$（窗口）。调整大小（函数（）{
$.fn.设置人头高度（0）；
});  
$.fn.setHeaderHeight=功能（高度）{
//重置为自动，否则我们无法检查高度
$（$headers.css（{'height'：'auto'}）；
//获得最高值
$（$头）。每个（函数（i，obj）{
高度=Math.max（高度，$（obj.outerHeight（））
});
//设定高度
$（$headers.css（{'height'：height+'px'}）；
}
//满载运行
$.fn.设置人头高度（0）；
}（jQuery））
正文{
填充：20px；
}
.项目{
身高：100%；
右边填充：20px；
填充顶部：20px；
显示器：flex；
弯曲方向：柱
}
.标题{
背景颜色：矢车菊蓝；
}
.内容{
背景颜色：鲑鱼；
柔性生长：1；
}
霉菌携带者{
最大宽度：500px；
}

比波
有些内容拉拉有些内容拉拉
比波
一些内容拉拉
比波
一些内容拉拉
比波
一些内容拉拉
比波
一些内容拉拉一些内容拉拉一些内容拉拉
哦，不，这个头盖包起来了
一些内容拉拉
这里是我使用jQuery的方法。事情变得更加复杂，因为你希望每一行的高度相等，但独立于其他行

我所做的是使用每个元素的顶部位置作为行标识符，循环遍历所有的头，向它们添加一个具有此位置的类，以便稍后我们可以使用该类选择整行。在每个循环中，我检查高度并保存最大值，当我检测到我们在新行中时（顶部位置已更改），我使用指定的类将行最大高度应用于前一行的所有元素

这是代码

function adjustHeaderHeights() {

    // First reset all heights to just increase if needed.
    $('div.header').css('height','auto');

    var curRow=$('div.header').first().offset().top,
        curRowMaxHeight=$('div.header').first().height();
    var n = $('div.header').length;

    $('div.header').each(function(index) {

        // Get header top position as row identifier, and add it as a class.
        var rowId = $(this).offset().top;
        $(this).addClass('rowid'+rowId);

        if (rowId != curRow) {  // It's a new row.
            $('div.header.rowid'+curRow).height(curRowMaxHeight);
            curRow = rowId;
            curRowMaxHeight=$(this).height();
        }
        else {
            curRowMaxHeight = $(this).height() > curRowMaxHeight ? $(this).height() : curRowMaxHeight;

            // It's the last header element, so we adjust heights of the last row.
            if (index+1 == n)
                $('div.header.rowid'+curRow).height(curRowMaxHeight);
        }
    });

}

$(window).resize(function() {
    adjustHeaderHeights();
});

adjustHeaderHeights();

我希望这会有所帮助
我的答案中是否缺少一些我可以添加或调整的内容，供您接受？@LGSon我不太理解tbh的“css方式”，但这不是您的错。干得好更新后的codepen 1出现了一些问题，基本上它只在最后一项是使标题换行的项时起作用。我修正了我现在也添加了创建“标题组”的可能性，这样你就可以说“在各自的组中，标题必须具有相同的高度。请在您看到它们时给予反馈或改进@Toskan您能给我看一个使用my
codepen 1
中脚本的版本吗？该版本仅在最后一个项目是使页眉换行的项目时有效。。。。正如我在上一个问题中所说的，不使用CSS框架像引导一样工作，我也不使用jQuery，我也制作了自己的脚本库，并且不熟悉它的所有功能：）对不起，我是说codepen 2。我正在考虑在上为它创建一个jquery插件github@Toskan谢谢，错过了：），更新了我的答案。。。在最后一项上时，
i
需要增加1，才能使
切片
工作
 body{
  padding: 20px;
}

.item{
  height: 100%;
  padding-right: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column
}

.header{
  background-color: cornflowerblue;
}

.content{
  background-color: salmon;
  flex-grow: 1;
}

.mycontainer{
  max-width: 500px;
}

function adjustHeaderHeights() {

    // First reset all heights to just increase if needed.
    $('div.header').css('height','auto');

    var curRow=$('div.header').first().offset().top,
        curRowMaxHeight=$('div.header').first().height();
    var n = $('div.header').length;

    $('div.header').each(function(index) {

        // Get header top position as row identifier, and add it as a class.
        var rowId = $(this).offset().top;
        $(this).addClass('rowid'+rowId);

        if (rowId != curRow) {  // It's a new row.
            $('div.header.rowid'+curRow).height(curRowMaxHeight);
            curRow = rowId;
            curRowMaxHeight=$(this).height();
        }
        else {
            curRowMaxHeight = $(this).height() > curRowMaxHeight ? $(this).height() : curRowMaxHeight;

            // It's the last header element, so we adjust heights of the last row.
            if (index+1 == n)
                $('div.header.rowid'+curRow).height(curRowMaxHeight);
        }
    });

}

$(window).resize(function() {
    adjustHeaderHeights();
});

adjustHeaderHeights();