html - 两个不同的 div 列中行的高度相等

Question

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

这是 fiddle :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;
  }
}

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