如何用HTML和CSS实现垂直交替排列的Div布局？

算力阿峰

2026-5-14

解决垂直交替图片画廊的布局问题

你的问题出在绝对定位的元素会脱离正常文档流——右侧的.small-container用了position:absolute后，页面里的其他元素（也就是第三个.large-container）完全不会考虑它的位置和高度，只会跟着前一个在文档流里的元素（第一个大容器）排列，所以才会直接出现在第一个大容器的正下方。

要实现你想要的「左侧第二个大容器紧跟右侧小容器下方」的效果，推荐用现代CSS布局方案，比如Grid，它能精准控制元素的位置和布局关系，代码也更简洁：

解决方案代码

<div class="gallery-grid">
  <div class="large-container">This is an outer container</div>
  <div class="small-container">This has been the small one</div>
  <div class="large-container">This is an outer container</div>
</div>

.gallery-grid {
  display: grid;
  /* 定义两列，宽度对应你的大、小容器 */
  grid-template-columns: 200px 150px;
  /* 行高由内容自动决定 */
  grid-auto-rows: auto;
}

.large-container {
  height: 100px;
  background-color: blue;
  color: white;
  /* 所有大容器都放在第一列 */
  grid-column: 1;
}

.small-container {
  height: 50px;
  background-color: red;
  /* 小容器放在第二列、第二行 */
  grid-column: 2;
  grid-row: 2;
}

/* 第二个大容器放在第一列、第三行，自然就紧跟小容器下方了 */
.large-container:last-child {
  grid-row: 3;
}