javascript - 如何使 float div成为每行最高元素的高度

Question

我有一堆表格 block ，如图所示。

该 block 具有以下 css

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

而且它们都包裹在 wrapper 中

<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. 每个 block 的高度都是动态的，具体取决于内容。
2. 每个 block 可以根据条件显示或不显示。如您所见，有可能第二个 block 不会显示，第三个 block 将被上推以与第一个 block 对齐。
3. 每“行”始终最多有 2 个 block
4. 将来会有更多这样的区 block 。

现在，我想要实现的是对于每一行，将高度较小的 block 设置为与高度较大的 block 相同的高度。我不确定如何使用 CSS 来解决这个问题。如果不可能，使用 jquery 处理此问题的最佳方法是什么？

我花了无数个小时也想不通(至少使用 CSS 是这样)。以上所有陈述均为要求，不可更改。任何专家的帮助将不胜感激。

Answer 1

你可能想看看 flexbox。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

这是我在 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;
}