CSS多相邻Div布局问题：实现Div2、Div3堆叠于Div1与Div4间并高度自适应

嘿，我懂你现在卡在哪了——要让中间两个div叠在一起，同时左右的div1、div4高度自动跟中间区域对齐，之前试flex和浮动都没搞定对吧？别慌，CSS Grid就是专门解决这种二维布局问题的，咱们直接上可行方案：

先上完整代码（HTML沿用你的结构） #

<div class="parent"> 
  <div class="div1">Div1 内容</div> 
  <div class="div2">Div2 内容<br>多行测试内容<br>看看高度会不会自适应</div> 
  <div class="div3">Div3 内容<br>我比Div2内容更多哦<br>再多加几行<br>验证高度对齐效果</div> 
  <div class="div4">Div4 内容</div> 
</div>

.parent {
  display: grid;
  grid-template-columns: auto 1fr auto; /* 左、中、右三列：左右宽度随内容走，中间占满剩余空间 */
  grid-template-rows: auto; /* 行高自动取该行最高元素的高度 */
  gap: 10px; /* 可选，给元素之间加些间距更美观 */
}

.div1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background: #f0f0f0;
}

/* 核心：把div2和div3塞进同一个网格单元格 */
.div2, .div3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.div2 {
  background: #ffebee;
  z-index: 1; /* 控制堆叠顺序，div2会在div3上方 */
  /* 如果需要让div2偏移一点，比如往下挪20px，加个margin-top: 20px就行 */
}

.div3 {
  background: #e8f5e9;
}

.div4 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  background: #e3f2fd;
}

为什么这个方案能解决问题？ #

• CSS Grid是二维布局系统，能同时控制行和列：所有元素都在同一个网格行里，div1和div4的高度会自动跟中间区域的最高内容对齐，完美解决自适应问题。
• 通过grid-column和grid-row把div2、div3指定到同一个网格单元格，它们会自动堆叠，再用z-index就能轻松控制谁在上谁在下。

为啥之前的flex和浮动没生效？ #

• Flex布局：它是一维布局，默认水平排列。如果强行让div2、div3堆叠，你可能会用position: absolute，但这样它们会脱离文档流，div1、div4的高度就不会跟着中间内容走了；换成垂直排列又没法实现左右布局，确实不太适配这个场景。
• 浮动布局：给div1左浮、div4右浮，中间的div2、div3会各自占空间，没法堆叠；而且中间内容变高时，左右div不会自动撑高，就算用清除浮动技巧也解决不了堆叠的问题。

额外小技巧 #

如果想让div2和div3在中间区域有不同的垂直位置（比如一个靠上一个靠下），给它们加align-self就行：

.div2 {
  align-self: start; /* 靠上对齐 */
}
.div3 {
  align-self: end; /* 靠下对齐 */
}

这样就能实现更灵活的堆叠效果啦！

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