如何拆分网页中的两个Div标签？求适配响应式的CSS代码

基础HTML结构（匹配你的left/right section） #

先确保HTML结构用容器统一包裹，方便全局控制：

<div class="layout-container">
  <div class="left-section">
    <!-- 左侧内容，比如文章主体、数据列表等 -->
  </div>
  <div class="right-section">
    <!-- 右侧内容，比如侧边栏、信息卡片、功能模块等 -->
  </div>
</div>

核心CSS代码（含响应式适配） #

以下代码实现固定比例的左右分栏，同时在移动端自动转为垂直布局：

/* 容器控制：限制宽度、居中显示 */
.layout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 30px; /* 左右栏之间的间距 */
  flex-wrap: wrap; /* 为响应式换行预留逻辑 */
}

/* 左侧栏：占比可灵活调整 */
.left-section {
  flex: 3; /* 和右侧的1份形成3:1的宽度比例 */
  min-width: 300px; /* 最小宽度阈值，避免内容过度挤压 */
}

/* 右侧栏 */
.right-section {
  flex: 1; /* 占据1份宽度 */
  min-width: 250px; /* 保证侧边栏内容的可读性 */
}

/* 移动端响应式断点（可按需调整宽度） */
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column; /* 转为垂直排列 */
    gap: 20px; /* 调整垂直方向的间距 */
  }
}

关键细节说明 #

• 用flex布局替代传统浮动，维护性更强，自带间距控制（gap属性）
• flex:3/flex:1的比例可自定义，比如改成flex:2/flex:1实现2:1的分栏效果
• min-width属性确保窗口缩小到一定程度前，内容不会挤压变形，超过阈值后自动换行
• 断点宽度768px是通用移动端分界点，可根据目标设备调整为992px或其他数值

内容的提问来源于stack exchange，提问作者Sanjeet Kumar