如何制作具有最小高度 div 的响应式列视图？

Question

我的 div 上有可变高度的问题这不允许 div 定位在适当的位置

我添加了一个问题作为代码片段来玩。

这是我想要的解决方案：

注意： div 高度可变，所以我无法删除最小宽度属性

我想让它响应，所以对于不同的设备它会有不同的列，所以我不能像下面这样使用（Html class 层次结构）

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>

Answer 1

您可以使用 css 弹性框：

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

如何制作具有最小高度 div 的响应式列视图？

How to make responsive column view with min-height div?

html

css

responsive-design