如何从卡片或类似物中获取标题与弹性盒子具有相同的高度？

Posted 2021-04-21

请不要乱砍

没有硬编码。这个想法并不能解决一个案例，例如：对于有4列的情况，但解决它的动态内容和响应屏幕大小。

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

codepen在这里：

https://codepen.io/anon/pen/OxzrzV

html

<h1>disclaimer: resize the window. Make the blue headers in a row match height</h1>
<div class="row mycontainer">
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
      </div>
  </div>
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">oh no this header wraps</div>
        <div class="content">some content lala </div>
      </div>
  </div>
</div>

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解决方案也很好......但它必须是万无一失的，并且也可以调整大小。 html结构的一般变化也很好。但必须做出正确回应。

所以这（通过硬编码实现并且没有响应）：

答案

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

• CSS - How to have children in different parents the same height?

和脚本方式，这里使用jQuery。

---

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

第二个样本集每行等于高度，并且使其工作的方法是检查项目的最高值（它为新行更改）并设置每个已处理范围/行的高度。

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

---

Updated 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>

<div class="row mycontainer">
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
      </div>
  </div>
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">oh no this header wraps</div>
        <div class="content">some content lala </div>
      </div>
  </div>
</div>

另一答案

在这里你有我的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();

我希望它有所帮助

以上是关于如何从卡片或类似物中获取标题与弹性盒子具有相同的高度？的主要内容，如果未能解决你的问题，请参考以下文章

具有相等高度的弹性盒子内部项目[重复]

整行的卡片/盒子尺寸相同，具体取决于最大的卡片

CSS3弹性盒子布局(display：flex)

如何从 Lync 联系人卡片中获取用户的电话号码或其他联系人详细信息？

如何通过 Volley 获取数据实现具有两个或多个不同卡片视图的 RecyclerView？

如何在颤动的列表视图中设置卡片的宽度？