Равная высота строк в двух разных столбцах - PullRequest
Новая
       23

Равная высота строк в двух разных столбцах

0 голосов
/ 08 мая 2019

Я знаю, как сделать высоту двух столбцов равной с помощью flexbox.Но здесь структура HTML немного сложна для меня.Может кто-нибудь сказать мне, как сделать высоту нескольких строк равными в двух параллельных столбцах?Я хочу добиться чего-то вроде следующего скриншота.

enter image description here

А вот скрипка: 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;
  }
}

1 Ответ

0 голосов
/ 08 мая 2019

С изменением структуры, т.е. удалением столбцов переноса, это возможно с помощью 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>
...