CSS 实现「上双下单」布局

实现思路

这个布局可以用两种方式实现：

1. 传统浮动布局：适合新手理解块级元素的排列方式。
   ​
2. CSS Grid 布局：更简洁、更直观的二维布局方案。

代码实现

方案1：浮动布局（兼容老式浏览器）

HTML 结构

CSS 样式（style.css）

/* 全局初始化 */

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

/* 最外层容器：模拟红色边框 */
.container {
width: 800px;
height: 400px;
border: 20px solid red;
margin: 50px auto;
}

/* 上部分容器 /
.top {
width: 100%;
height: 180px;
margin-bottom: 20px; / 模拟中间红色分隔线 */
}

/* 左栏 */
.left {
width: 48%;
height: 100%;
float: left;
background: #fff;
}

/* 右栏 */
.right {
width: 48%;
height: 100%;
float: right;
background: #fff;
}

/* 清除浮动，防止父元素高度塌陷 */
.clear {
clear: both;
}

/* 下部分通栏 */
.bottom {
width: 100%;
height: 180px;
background: #fff;
}

方案2：CSS Grid 布局（更现代）

HTML 结构（和上面一样）

CSS 样式（grid-style.css）

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

.container {
width: 800px;
height: 400px;
border: 20px solid red;
margin: 50px auto;
display: grid;
/* 定义2行：第一行高度180px，第二行180px /
grid-template-rows: 180px 180px;
/ 定义2列：宽度均分 /
grid-template-columns: 1fr 1fr;
/ 行列之间的间距，模拟红色分隔线 */
gap: 20px;
}

/* 下部分通栏：横跨2列 */
.bottom {
grid-column: 1 / -1;
background: #fff;
}

/* 左右栏背景 */
.left, .right {
background: #fff;
}

核心知识点解析

1. 浮动布局关键点
   ​

• float: left/right ：让块级元素脱离文档流，实现横向排列。
  ​
• clear: both ：清除浮动，解决父元素高度塌陷问题。
  ​
• margin-bottom ：用来模拟中间的红色分隔线，和外边框的颜色保持一致。
  ​

2. Grid 布局关键点
   ​

• display: grid ：开启网格布局。
  ​
• grid-template-rows/columns ：定义行列的数量和尺寸。
  ​
• grid-column: 1 / -1 ：让元素从第1列开始，到最后一列结束，实现通栏效果。
  ​
• gap ：设置行列之间的间距，比手动设置margin更方便。