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

Question

我有3个不同内容的div。我希望div因为他们的背景而在高处匹配。我的问题是如果可能的话，如何使用没有jQuery / Javascript的纯html / css来实现这一点。

当小时，每个div变为12列，因此它们的高度适合内容。中等时，绿色和蓝色是相同的高度。大时，灰色框与蓝色和绿色div的高度匹配。

https://jsfiddle.net/Ljzr2krv/

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

目前，为了实现这一点，我一直在使用jQuery来抓住divs＆＃39;自然高度，并根据窗口大小分配较大的高度。每次窗口调整大小时都会调用此方法。

我希望有一个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 Grid。它在字面上仅在浏览器中可用（在没有启用标志的情况下）在过去一周或两周内（截至撰写此答案时），因此这是一个“使用风险自负”＃34;回答，但你可能会考虑使用它。布局简单，IE / Edge使用的旧版本应该可行。

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

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

资源：

• http://gridbyexample.com/
• https://developers.google.com/web/updates/2017/01/css-grid
• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

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/