将每三个div的高度设置为最后一个/最长的高度

Question

我有三个浮动到左边的div，有33.33％，每个都有不同的内容。我想让每个人的身高都一样。我想到设置前两个div的高度，用javascript更短到最后一个div的高度。因此它将响应屏幕设备，并且在移动设备和平板电脑上将无法运行。

这些div将在网站上显示为价格表。有关如何实现它的任何建议？

Answer 1

使用flexbox：

<div class="parent">
   <div class="child"></div>
   <div class="child"></div>
   <div class="child"></div>
</div>

.parent {
    display: flex;
}

Answer 2

• 使用合适的选择器选择所有目标元素。
• 使用.height()
获取数组中所有元素的高度（.map）
• 使用Math.max
从所选元素中获取最大高度
• 使用.height(NEW_HEIGHT)
设置所有元素的高度

$('button').on('click', function() {
  var allH = $('.target').map(function() {
    return $(this).height();
  });
  var maxH = Math.max.apply(null, allH);
  $('.target').height(maxH);
});

div {
  float: left;
  width: 33.33%;
  background-color: green;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='target'>1
  <br>
</div>
<div class='target'>2
  <br>
  <br>
  <br>
</div>
<div class='target'>3
  <br>
  <br>
  <br>
  <br>
</div>

<button>Set Max Height</button>