如何在HTML中实现阶梯状的区块对齐？

要做出阶梯状排列的盒子，用CSS就能轻松实现，下面给你几种实用方案：

方法1：CSS Grid 精准定位 #

Grid布局可以直接通过网格区域定位，让每个盒子落在对应的行列位置，完美实现阶梯效果：

<div class="staircase-grid">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

.staircase-grid {
  display: grid;
  /* 定义4列，每列150px；4行，每行100px */
  grid-template-columns: repeat(4, 150px);
  grid-template-rows: repeat(4, 100px);
}

.box {
  width: 150px;
  height: 100px;
  background: #4285F4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* 逐个指定每个盒子的网格位置 */
.box:nth-child(1) { grid-area: 1 / 1; }
.box:nth-child(2) { grid-area: 2 / 2; }
.box:nth-child(3) { grid-area: 3 / 3; }
.box:nth-child(4) { grid-area: 4 / 4; }

方法2：Flexbox + 偏移变换 #

用Flex垂直排列盒子，再通过transform: translateX()给后续盒子添加水平偏移，适合需要递增偏移量的场景：

<div class="staircase-flex">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

.staircase-flex {
  display: flex;
  flex-direction: column;
}

.box {
  width: 150px;
  height: 100px;
  background: #EA4335;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* 从第二个盒子开始，每个递增40px偏移 */
.box:nth-child(2) { transform: translateX(40px); }
.box:nth-child(3) { transform: translateX(80px); }
.box:nth-child(4) { transform: translateX(120px); }

方法3：负 Margin 堆叠阶梯 #

如果想要盒子有堆叠重叠的阶梯感，可以用负margin来实现，让每个盒子向上向左偏移：

<div class="staircase-margin">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
</div>

.staircase-margin {
  position: relative;
  width: fit-content; /* 让容器宽度适配内容 */
}

.box {
  width: 150px;
  height: 100px;
  background: #34A853;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  position: relative;
}

/* 从第二个盒子开始，向上偏移20px，向右偏移40px */
.box:nth-child(n+2) {
  margin-top: -20px;
  margin-left: 40px;
}

你可以根据自己的需求选对应的方案，调整宽度、高度、偏移量就能匹配想要的阶梯效果。

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