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

Question

我的 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>

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 制作响应式列视图？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-01-31 12:35:26

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-01-31 12:35:26

解决方案1
2 已采纳 2020-01-31 12:35:26