如何从卡片或类似物品获取标题与弹性盒子具有相同的高度？
请不要乱砍
没有硬编码。 这个想法并不是针对一种情况解决它，例如，对于有4列的情况，但是针对动态内容和响应屏幕大小来解决它。
对我来说问题是它基本上不是直接的孩子，而是它的内容
codepen在这里：
HTML
disclaimer: resize the window. Make the blue headers in a row match height
bippo some content lala some content lala bippo some content lala bippo some content lala bippo some content lala bippo some content lala some content lala some content lala oh no this header wraps some content lala CSS
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; }
我想要什么？
蓝色标题总是与当前行中的所有元素具有相同的大小。
一个坚实的jquery解决方案也很好……但它必须是万无一失的，并且也可以resize。 html结构的一般变化也很好。 但必须做出正确回应。
所以这（通过硬编码实现而不是响应）：
基本上有两种方法可以实现这一点，CSS方式，
- CSS – 如何让不同父母的孩子身高相同？
和脚本方式，这里使用jQuery。
第一个脚本示例显示如何在所有项目上设置相等的高度。
第二个样本集每行的高度相等，并且使其工作的方法是检查项目的最高值（它为新行更改）并设置每个已处理范围/行的高度。
我还添加了一些优化，预加载项目，因此如果只有一个项目或列，它将不会处理它们。
更新了codepen 1
堆栈代码段1
(function ($) { // preload object array to gain performance var $headers = $('.header') // run at resize $( window ).resize(function() { $.fn.setHeaderHeight(0); }); $.fn.setHeaderHeight = function(height) { // reset to auto or else we can't check height $($headers).css({ 'height': 'auto' }); // get highest value $($headers).each(function(i, obj) { height = Math.max(height, $(obj).outerHeight()) }); // set the height $($headers).css({ 'height': height + 'px' }); } // run at load $.fn.setHeaderHeight(0); }(jQuery));
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; }
bippo some content lala some content lala bippo some content lala bippo some content lala bippo some content lala bippo some content lala some content lala some content lala oh no this header wraps some content lala
在这里你有我的jQuery方法。 事情变得更复杂，因为你希望你想要每行的高度相等，但与其余部分无关。
我所做的是使用每个元素的顶部位置作为行标识符，循环遍历所有标题，为它们添加一个具有此位置的类，以便稍后我们可以使用该类选择整行。 在每个循环中，我检查高度并保存最大值，当我检测到我们在一个新行（顶部位置已经改变）时，我使用类I将行最大高度应用于上一行的所有元素分配了。
这是代码……
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();
我希望它有所帮助