如何仅用CSS实现左侧双Div、右侧单Div布局（不可修改HTML）

当然可以做到！虽然你的HTML结构里红色的.div2排在绿色.div3的后面，但我们完全可以通过纯CSS调整布局，让它紧贴在蓝色.div1的下方，不需要修改任何HTML代码，也不用JavaScript。

问题分析 #

你原来的CSS里，.div2用了clear: left，但因为.div3没有浮动，它会占据.div1右侧的全部空间并撑满高度，导致.div2被挤到.div3的下方，这就是红色div没出现在蓝色div下面的核心原因。

最优解决方案：使用CSS Grid布局 #

CSS Grid是最灵活的方案，它允许我们完全控制每个元素的位置，不受HTML顺序的限制。只需要给父容器（这里是<body>）设置网格布局，然后指定每个div的网格区域即可：

body {
  margin: 0; /* 去掉默认边距，避免布局偏移 */
  display: grid;
  grid-template-columns: 200px 1fr; /* 第一列宽度200px，第二列占剩余空间 */
  grid-template-areas: 
    "div1 div3"
    "div2 div3"; /* 定义网格区域：div1左上，div2左下，div3右侧跨两行 */
}

div.div1 {
  grid-area: div1; /* 指定该元素对应网格中的div1区域 */
  height: 400px;
  background-color: blue;
}

div.div2 {
  grid-area: div2; /* 指定该元素对应网格中的div2区域 */
  height: 15px;
  background-color: red;
}

div.div3 {
  grid-area: div3; /* 指定该元素对应网格中的div3区域 */
  height: 425px;
  background-color: green;
}

原理说明 #

• display: grid把<body>转化为网格容器
• grid-template-columns定义两列宽度，第一列和.div1宽度匹配，第二列自动填充剩余空间
• grid-template-areas定义布局结构，让.div3同时占据右侧的两行空间，.div1和.div2分别占据左侧的上下两行，彻底摆脱HTML顺序的限制。

兼容旧浏览器的备选方案：浮动调整 #

如果需要兼容不支持Grid的旧浏览器，也可以用浮动实现：

body {
  margin: 0;
}

div.div1 {
  float: left;
  height: 400px;
  width: 200px;
  background-color: blue;
}

div.div3 {
  float: right; /* 让div3浮动到右侧 */
  width: calc(100% - 200px); /* 宽度为总宽度减去div1的宽度 */
  height: 425px;
  background-color: green;
}

div.div2 {
  clear: left; /* 清除左侧浮动，让div2紧贴div1下方 */
  width: 200px;
  height: 15px;
  background-color: red;
}

这个方案通过让.div3浮动到右侧并计算宽度，再让.div2清除左侧浮动，就能回到.div1的下方。

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