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

Question

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

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

.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来获取divs的自然高度，并根据window分配高度中较大的一个尺寸。每次 window 调整大小时都会调用它。

我希望 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>

Answer 2

查看 CSS 网格。从字面上看，它仅在最近一两周（截至撰写此答案时）在浏览器中可用（未启用标志），因此这是一个 "use at your own risk" 答案，但您可能会考虑为此使用它。 IE/Edge 使用的旧版本布局足够简单。

http://caniuse.com/#feat=css-grid

.wrapper {
  display: grid;
  grid-gap: 10px;
}
@media screen and (min-width: 768px) {
  .wrapper {
    grid-template-columns: 30% 70%;
  }
}
.col-1 {
  background-color: blue;
}
.col-2 {
  background-color: green;
}
.col-3 {
  background-color: grey;
}
@media screen and (min-width: 768px) {
  .col-1 {
    grid-column: 1;
    grid-row: 1;
  }
  .col-2 {
    grid-column: 2;
    grid-row: 1;
  }
  .col-3 {
    grid-column: 1 / span 2;
    grid-row: 2;
  }
}
@media screen and (min-width: 1024px) {
  .col-1 {
    grid-column: 1 / 2;
    grid-row: 1;
  }
  .col-2 {
    grid-column: 1 / 2;
    grid-row: 2;
  }
  .col-3 {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="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="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 class="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>

资源：

Answer 3

正如 Joseph Marikle 的回答所指出的，只需将 display:flex; 和 flex-wrap:wrap 添加到您的 .row.collapse 即可获得所需的定位。

他的回答没有告诉您的是，此解决方案中更困难的部分是让边距和填充正确显示，就像在您的图像中一样。以下是您需要添加的内容：

将每个元素的内容包装在通用包装器中；
将 display:flex + flex-direction:column 添加到包装器及其父列，并将 flex-grow:1 添加到包装器；
向外部添加填充 .row.collapse;
为包装纸添加边距；
将 background-color 从列移到包装。

就是这样。概念验证：https://jsfiddle.net/websiter/xho9nzsk/

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

html columns fit content but match heights when side by side (without jQuery)

html

css

flexbox

zurb-foundation