如何使浮动div成为每行最高元素的高度

Question

我有一堆图表显示在图片中。

该块具有以下css

.block {
    float: left;
    width: 50%;
}

它们都包裹在一个包装器中

<div class="wrapper">
    <div ng-show="condition1" class="block"></div>
    <div ng-show="condition2" class="block"></div>
    <div ng-show="condition3" class="block"></div>
</div>

1. 每个区块的高度都是动态的，具体取决于内容。
2. 根据条件，每个区块可以显示或不显示。如您所见，第二个区块可能无法显示，第三个区块将被推高以与第一个区块对齐。
3. 每个＆＃34;行＆＃34;
总是最多2个街区
4. 将来会有更多这些街区。

现在，我想要实现的是每行，将具有较小高度的块设置为与具有较大高度的块相同的高度。我不知道如何使用CSS来解决这个问题。如果不可能，那么使用jquery来解决这个问题的最佳方法是什么？

我花了无数个小时而无法弄清楚（至少使用CSS）。以上所有陈述均为要求，不能更改。任何专家的帮助将不胜感激。

Answer 1

您可能需要查看flexbox。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox可用于根据父级的大小拉伸子元素。

这是我在jsfiddle中做的快速测试

https://jsfiddle.net/7Lknyxqr/

.wrapper{
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  height: auto;
  width: 100%;
}

.block{
  width: calc(50% - 20px);
  background-color: #343;
  margin: 10px;
}