html 列适合内容但并排时匹配高度(没有 jQuery)

Question

我有 3 个内容不同的 div。由于它们的背景，我希望 div 的高度匹配。我的问题是如何在没有 jQuery/Javascript 的情况下使用纯 html/css 实现这一点，如果可能的话。

小的时候，每个 div 变成 12 列，所以它们的高度适合内容。中等时，绿色和蓝色的高度相同。较大时，灰色框与蓝色和绿色 div 的高度匹配。

https://jsfiddle.net/Ljzr2krv/

.col-1 {
  background-color: blue;
}
.col-2 {
  background-color: green;
}
.col-3 {
  background-color: grey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="row collapse">
  <div class="large-3 small-12 columns">
    <div class="row collapse">
      <div class="small-12 medium-6 large-12 columns col-1">
      The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
      </div>
      <div class="small-12 medium-6 large-12 columns col-2">
      The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
      </div>
    </div>
  </div>
  <div class="large-9 small-12 columns col-3">
  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
  </div>
</div>

目前，为了实现这一点，我一直在使用 jQuery 获取 div 的自然高度，并根据窗口大小分配较大的高度。每次窗口调整大小时都会调用它。

我希望有一个 html/css 解决方案可以实现 div 的这种排列，同时允许 div 的高度像上图一样对齐。

Answer 1

您可以添加以下规则。它似乎有效。

.row.collapse {
    display:flex;
    flex-wrap:wrap;
}

.col-1 {
  background-color: blue;
}
.col-2 {
  background-color: green;
}
.col-3 {
  background-color: grey;
}

.row.collapse {
    display:flex;
    flex-wrap:wrap;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="row collapse">
  <div class="large-3 small-12 columns">
    <div class="row collapse">
      <div class="small-12 medium-6 large-12 columns col-1">
      The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
      </div>
      <div class="small-12 medium-6 large-12 columns col-2">
      The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
      </div>
    </div>
  </div>
  <div class="large-9 small-12 columns col-3">
  The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
  </div>
</div>