尝试创建响应式布局，但右侧div一直压过左侧div的顶部

要解决这个问题，可以使用CSS中的Flexbox布局或Grid布局来创建响应式布局。这两种布局方式都可以实现灵活的页面布局，使左侧div和右侧div能够正确地排列。

1. 使用Flexbox布局： Flexbox布局是一种弹性盒子布局模型，通过设置容器的display属性为flex，可以将子元素排列为一行或一列，并自动调整宽度和高度。以下是一个示例代码：

HTML代码：

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>

CSS代码：

.container {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 1;
}

在上述代码中，通过设置容器的display属性为flex，使其成为一个弹性容器。左侧和右侧的div都设置了flex: 1，表示它们平均占据剩余的空间。

1. 使用Grid布局： Grid布局是一种二维网格布局模型，通过设置容器的display属性为grid，可以将页面划分为行和列，并对子元素进行定位。以下是一个示例代码：

HTML代码：

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>

CSS代码：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.left {
  grid-column: 1;
}

.right {
  grid-column: 2;
}

在上述代码中，通过设置容器的display属性为grid，使其成为一个网格容器。通过grid-template-columns属性设置两列，每列的宽度平分。左侧和右侧的div分别通过grid-column属性指定它们所在的列。

以上两种方法都可以实现响应式布局，使左侧div和右侧div正确排列。具体选择哪种方法取决于实际需求和布局复杂度。

腾讯云相关产品和产品介绍链接地址：

• Flexbox布局：https://cloud.tencent.com/document/product/249/30729
• Grid布局：https://cloud.tencent.com/document/product/249/30730