Question

我有一个容器，其中有许多孩子需要相同的高度，只有成对的两个。例如，第一个和第二个元素需要与两个中的最高元素一样高，第三个和第二个元素需要与最高者中的任何一个一样高，与第一个和第二个孩子的高度无关。

我当前的代码，等于所有儿童身高

＆＃13;

$(document).ready(function(){
        // Select and loop the container element of the elements you want to equalise
        $('.parent').each(function(){

            // Cache the highest
            var highestBox = 0;

            // Select and loop the elements you want to equalise
            $('.child', this).each(function(){

                // If this box is higher than the cached highest then store it
                if($(this).height() > highestBox) {
                    highestBox = $(this).height();
                }

            });

            // Set the height of all those children to whichever was highest
            $('.child',this).height(highestBox);

        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class='child'>some dynamic content</div>
  <div class='child'>some dynamic content</div>
  <div class='child'>some dynamic content</div>
  <div class='child'>some dynamic content</div>
  <div class='child'>some dynamic content</div>
  <div class='child'>some dynamic content</div>
</div>

＆＃13;

Answer 1

希望下面你正在寻找的东西。可能正在使用flex是完成任务的最简单方法。在这里，我尝试了一些jquery。

＆＃13;

$(document).ready(function() {

  // Cache the highest
  var highestBox = 0;
  var loop = 1
  // Select and loop the elements you want to equalise
  $('.child', this).each(function() {
    if (loop % 2 != 0) {
      // If this box is higher than the cached highest then store it
      highestBox = $(this).height();
      if ($(this).next('.child').height() > highestBox) {
        highestBox = $(this).next('.child').height();
      }

      // Set the height of all those children to whichever was highest
      $(this).height(highestBox);
      $(this).next('.child').height(highestBox);
    }
    loop++;

  });

});

＆＃13;

.child {
  width: 50%;
  float: left;
  margin-bottom: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class='parent'>
  <div class='child'>some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content</div>
  <div class='child'>some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content
    some dynamic content some dynamic content some dynamic content</div>
  <div class='child'>some dynamic content</div>
  <div class='child'>some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content</div>
  <div class='child'>some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content some dynamic content</div>
  <div class='child'>some dynamic content</div>
</div>

＆＃13;

Answer 2

你可能想要实现类似网格的行为，使用flexbox可以很容易地实现它：

＆＃13;

  /* Purely for visual appearance */
.parent {
  width: 300px;  
}
.child {
  background: linear-gradient(45deg, lightgreen, yellow);
  padding: 5px;
  box-sizing: border-box;
}
/* Actual logic */
.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.child {
  flex: 1 1 50%;
}

＆＃13;

<div class='parent'>
  <div class='child'>a bit of text</div>
  <div class='child'>very large amount of content to make height largest across all rows</div>
  <div class='child'>a b c d e f g h i j k l m n o p q r s t u v w x y z</div>
  <div class='child'>a b c</div>
</div>

＆＃13;

使每两个元素的高度相同

2 个答案: