2

Как выровнять 1,3 и 2,4 блоки по высоте, при том что они лежат в разных контейнерах и текста в них может быть разное количество?

.wrap{
display: flex;
background-color: #000;
padding: 5px;
}
.row{
  width: 50%;
  display: flex;
  flex-direction: column;
}
.col{
  height: 100%;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
}
.col span{
  font-weight: 700;
  color: red;
}
<div class="wrap">
  <div class="row">
    <div class="col"><span>1)</span>Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas? Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas?</div>
    <div class="col"><span>2)</span>Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas? </div>
  </div>
  <div class="row">
    <div class="col"><span>3)</span>Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore </div>
    <div class="col"><span>4)</span>Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas?</div>
  </div>
</div>

1
  • а разные row - это обязательное условие? почему нельзя использовать один? 2 апр 2019 в 12:20

2 ответа 2

1

Похоже что никак. Возьми блоки в один .row задай следующий стиль и сортируй блоки с помощью свойства order. Возможно ошибаюсь и есть вариант на CSS (без JS), если есть извините!

* {
  box-sizing: border-box;
}
.row{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.col{
  width: 50%;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
}
.col span{
  font-weight: 700;
  color: red;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
<div class="wrap">
  <div class="row">
    <div class="col order-1"><span>1)</span>Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas? Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas?</div>
    <div class="col order-3"><span>2)</span>Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas? </div>
    <div class="col order-2"><span>3)</span>Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore </div>
    <div class="col order-4"><span>4)</span>Libero maiores minima repellat! Alias aliquid asperiores aspernatur corporis, cum cumque, dolor doloremeligendi enim esse harum inventore iusto nesciunt obcaecati officia omnis possimus praesentium quae reprehenderit rerum soluta voluptas?</div>
  </div>
  
</div>

1
  • Ну вот в том то и загвоздка что надо разделять через row, эти блоки у меня в slick slider и они листаются по два, в общем как я понял что не выйдет, я уже реализовал через js, определяю самый высоки и даю такую высоту всем.
    – Karalahti
    3 апр 2019 в 16:13
1

Если я правильно понял вопрос, можно попробовать

.wrap{
min-height: 100px;
height: auto;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.