Одинаковая высота для строк в макете из 2 столбцов

#html #css

#HTML #css

Вопрос:

Я хочу макет из 2 столбцов, подобный этому:

Как вы можете видеть, каждая «строка» имеет ту же высоту, что и другая. Я пытаюсь это закодировать, но безуспешно. Я попробовал bootstrap, который работает, но он не реагирует (очевидно, что второй столбец не идет ниже первого).

Я хочу, чтобы он вел себя так:

Затем я попытался установить высоту каждой части с помощью javascript, это сработало, но высота остается неизменной даже после изменения размера до ширины мобильного устройства, и я действительно ненавижу этот метод.

Есть ли какой-нибудь обычный / простой способ сделать это?

Ответ №1:

Вы можете использовать display:flex для этого.

Чтобы сделать так, чтобы столбцы располагались друг под другом при изменении размера экрана, используйте медиа-запрос

Смотрите Пример фрагмента ниже или этот JSFIDDLE, чтобы увидеть, как работает отзывчивость

 .flexbox-container {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}
.flexbox-container > div {
  width: 50%;
  padding: 10px;
  border: 1px solid green;
  height: 300px;
}
.flexbox-container > div:first-child {
  margin-right: 1px;
}

.flexbox-container2 > div {
  height:100px;
}
@media screen and (max-width:767px){
.flexbox-container{display:block;}
}

 <div class="flexbox-container flexbox-container2">
  <div>
    <h3>Row 1 - Column 1</h3>
  </div>
  <div>
    <h3>Row 1 - Column 2</h3>
  </div>
</div>
<div class="flexbox-container">
  <div>
    <h3>Row 2 - Column 1</h3>
  </div>
  <div>
    <h3>Row 2 - Column 2</h3>
  </div>
</div>
<div class="flexbox-container flexbox-container2">
  <div>
    <h3>Row 3 - Column 1</h3>
  </div>
  <div>
    <h3>Row 3 - Column 2</h3>
  </div>
</div>

1. Это похоже на решение начальной загрузки, о котором я упоминал, но проблема в том, как мне поместить второй столбец под первым на устройствах малой ширины? Потому что с этим решением оно выполняет следующее на небольших устройствах: «col1_row1, col2_row1, col1_row2, col2_row2» вместо «col1_row1, col1_row2, col2_row1, col2_row2». Надеюсь, вы понимаете, что я имею в виду.

2. Для этого можно использовать медиа-запросы

3. Я использую медиа-запросы, но дело в том, как вам удастся переместить второй столбец под первый, если это решение на самом деле «3 строки», а не «2 столбца».

4. Это решение создает «макет из 2 столбцов», как вы указали.. Это то, что задавал вопрос. Я не слишком уверен, чего вы хотите

5. Спасибо Абхишеку Пандею за добавление медиа-запроса. Теперь он отвечает на ваш вопрос @KarlosOtruba