Как сделать отзывчивый вид столбца с помощью min-height div? - PullRequest
Новая
       4

Как сделать отзывчивый вид столбца с помощью min-height div?

0 голосов
/ 31 января 2020

У меня проблема с переменной высотой в моем div, которая не позволяет div разместить в соответствующем месте

Я добавил проблему в виде фрагмента кода для игры.

Вот решение, которое я хочу:

enter image description here

Примечание: div имеет переменную высоту, поэтому я не могу удалить свойство min-width

Я хотел сделать его отзывчивым, чтобы для разных устройств у него был другой столбец, поэтому я не могу использовать его следующим образом (Html иерархия классов) 

Row

  Column

  Column

Row

  Column


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<div class="row">
  <div class="column" style="min-height: 400px; background:#bfaeae; border: 1px dotted;">
    <h2>Column 1</h2>
  </div>
  <div class="column" style="min-height: 200px; background:#bfaeae; border: 1px dotted;">
    <h2>Column 2</h2>
  </div>
  <div class="column" style="min-height: 200px; background:#bfaeae; border: 1px dotted;">
    <h2>Column 3</h2>
  </div>
</div>

</body>
</html>

1 Ответ

2 голосов
/ 31 января 2020

Вы можете использовать css flex box: 

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }
    
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
    }
    
    .column {
      padding: 10px;
      width: 50%;
    }
  </style>
</head>

<body>

  <div class="row">
    <div class="column" style="min-height: 400px; background:#bfaeae; border: 1px dotted;">
      <h2>Column 1</h2>
    </div>
    <div class="column" style="min-height: 200px; background:#bfaeae; border: 1px dotted;">
      <h2>Column 2</h2>
    </div>
    <div class="column" style="min-height: 200px; background:#bfaeae; border: 1px dotted;">
      <h2>Column 3</h2>
    </div>
  </div>

</body>

</html>
...