时间戳

首页 > 解决方案 > 如何使用最小高度 div 制作响应式列视图？

html - 如何使用最小高度 div 制作响应式列视图？

问题描述

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

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

这是我想要的解决方案：

在此处输入图像描述

注意： 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>

标签： htmlcssresponsive-design

解决方案

您可以使用 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>

推荐阅读