两个不同 div 列中的行高度相等答案

【问题标题】：Equal height of rows in two different div columns两个不同 div 列中的行高度相等
【发布时间】：2019-05-08 11:46:15
【问题描述】：

我知道如何使用 flexbox 使两列高度相等。但是这里的 HTML 结构对我来说有点复杂。有人可以告诉我如何使两个平行列中的多行高度相等吗？我想实现如下截图。

这里是小提琴：https://jsfiddle.net/awaises/qw059gd6/2/

HTML：

<div class="wrapper">
  <div class="col-left">
    <div class="row">
      <div>Row Y1</div>
      <div>Row Y1</div>
    </div>
    <div class="row">
      <div>Row Y2</div>
      <div>Row Y2</div>
      <div>Row Y2</div>
      <div>Row Y2</div>
      <div>Row Y2</div>
    </div>
    <div class="row">
      <div>Row Y3</div>
      <div>Row Y3</div>
    </div>
    <div class="row">
      <div>Row Y4</div>
      <div>Row Y4</div>
    </div>
    <div class="row">
      <div>Row Y5</div>
      <div>Row Y5</div>
    </div>
  </div>
  <div class="col-right">
   <div class="row">
      <div>Row R1</div>
      <div>Row R1</div>
      <div>Row R1</div>
    </div>
    <div class="row">
      <div>Row R2</div>
      <div>Row R2</div>
    </div>
    <div class="row">
      <div>Row R3</div>
    </div>
    <div class="row">
      <div>Row R4</div>
      <div>Row R4</div>
      <div>Row R4</div>
      <div>Row R4</div>
      <div>Row R4</div>
      <div>Row R4</div>
      <div>Row R4</div>
    </div>
    <div class="row">
      <div>Row R5</div>
    </div>
  </div>
</div>

CSS：

body{
  font-family: Arial;
  font-size: 14px;
}
.wrapper{
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px;
  background: #b4d6b4;
}
.wrapper:after{
  display: block;
  content: "";
  clear: both;
}
.col-left,
.col-right{
  width: 50%;
  box-sizing: border-box;
  padding: 0 5px;
}
.col-left{
  float: left;
}
.col-right{
  float: left;
}
.row{
  margin: 10px 0;
  padding: 5px;
}
.col-left .row{
  background-color:#f2f2af;
}
.col-right .row{
  background-color: #e2aaaa;
}

@media only screen and (max-width: 360px) {
  .col-left,
  .col-right{
    width: 100%;
    float: none;
  }
}

【问题讨论】：

在当前结构下不可能。没有 CSS 机制来均衡不共享父元素的元素之间的高度。随着结构的变化，CSS-Grid 可能是一种选择，但即使这样在移动版本中也会失败。
如果结构相同，没有问题。但是有两种不同的结构......使用Javascript或玩min-height

标签： html css less

【解决方案1】：

随着结构的变化，即移除包装列，这可以通过 CSS-Grid 实现

.wrapper {
  padding: 1em;
  background: lightgreen;
  margin: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-gap: .5em;
}

.row div {
  border: 1px solid grey;
}

.left {
  background: goldenrod;
  grid-column: 1;
}

.right {
  background: rebeccapurple;
  color: white;
  grid-column: 2;
}

@media screen and (max-width:600px) {
  .left,
  .right {
    grid-column: 1 / span 2
  }
}

<div class="wrapper">
  <div class="row left">
    <div>Row Y1</div>
    <div>Row Y1</div>
  </div>
  <div class="row left">
    <div>Row Y2</div>
    <div>Row Y2</div>
    <div>Row Y2</div>
    <div>Row Y2</div>
    <div>Row Y2</div>
  </div>
  <div class="row left">
    <div>Row Y3</div>
    <div>Row Y3</div>
  </div>
  <div class="row left">
    <div>Row Y4</div>
    <div>Row Y4</div>
  </div>
  <div class="row left">
    <div>Row Y5</div>
    <div>Row Y5</div>
  </div>
  <div class="row right">
    <div>Row R1</div>
    <div>Row R1</div>
    <div>Row R1</div>
  </div>
  <div class="row right">
    <div>Row R2</div>
    <div>Row R2</div>
  </div>
  <div class="row right">
    <div>Row R3</div>
  </div>
  <div class="row right">
    <div>Row R4</div>
    <div>Row R4</div>
    <div>Row R4</div>
    <div>Row R4</div>
    <div>Row R4</div>
    <div>Row R4</div>
    <div>Row R4</div>
  </div>
  <div class="row right">
    <div>Row R5</div>
  </div>
</div>

【讨论】：