仅使用CSS在2个响应列中堆叠元素

基础概念

在CSS中，可以使用Flexbox或Grid布局来创建响应式列，并在其中堆叠元素。这两种布局模型都提供了强大的功能来控制元素的排列和对齐方式。

类型

Flexbox布局：通过display: flex;来启用。
Grid布局：通过display: grid;来启用。

应用场景

Flexbox：适用于需要灵活调整元素大小和顺序的场景，如导航栏、表单布局等。
Grid：适用于需要创建复杂网格结构的场景，如杂志布局、仪表板等。

示例代码

以下是使用Flexbox和Grid在两个响应列中堆叠元素的示例代码。

Flexbox示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Columns</title>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .column {
    flex: 1 1 50%;
    box-sizing: border-box;
    padding: 10px;
  }
  @media (max-width: 600px) {
    .column {
      flex: 1 1 100%;
    }
  }
</style>
</head>
<body>
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>
</body>
</html>

Grid示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns</title>
<style>
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
  }
  @media (max-width: 600px) {
    .container {
      grid-template-columns: 1fr;
    }
  }
</style>
</head>
<body>
<div class="container">
  <div>Column 1</div>
  <div>Column 2</div>
</div>
</body>
</html>

遇到的问题及解决方法

问题：元素没有按预期堆叠

原因：可能是CSS选择器不正确，或者媒体查询设置不当。

解决方法：

确保选择器正确匹配了需要堆叠的元素。
检查媒体查询的断点是否设置合理，确保在目标设备上生效。

问题：列宽不一致

原因：可能是Flexbox或Grid的属性设置不正确。

解决方法：

对于Flexbox，确保flex属性设置正确，例如flex: 1 1 50%;表示每个列占据50%的宽度，并且可以增长和收缩。
对于Grid，确保grid-template-columns设置正确，例如repeat(auto-fit, minmax(300px, 1fr));表示列宽至少为300px，最大为1fr（等分剩余空间）。