如何通过CSS实现下排盒子交错对齐于上排盒子的间隙下方

你可以通过Flex弹性布局快速实现需求，无需修改原有HTML结构，修改后的CSS代码如下：

/* 新增父容器布局样式 */
.box {
  display: flex;
  flex-wrap: wrap;
  gap: 150px;
  /* 可根据实际场景调整最小宽度，避免容器宽度不足提前换行 */
  min-width: 750px;
}
.box a{
  /* 删除原有的margin-left: 150px，改用父容器gap控制间距 */
  margin-top: 10px;
  text-align: center;
  display: inline-block;
  background: yellow;
  padding: 15px 30px;
  border: 1px solid green;
  width: 150px;
  height: 40px;
  text-decoration: none;
  color: lightskyblue;
  /* 新增属性确保宽高计算包含padding和border，避免元素尺寸溢出 */
  box-sizing: border-box;
}
/* 下排第一个元素添加左侧偏移，对齐上排空隙 */
.box a:nth-child(4) {
  margin-left: 150px;
}

实现说明 #

• Flex布局的自动换行特性会自动把超出容器宽度的2个元素挤到下一行，用gap统一控制横向间距比给每个子元素加左边距更易维护。
• 第4个元素的150px左边距刚好将下排两个元素整体右移半个元素加半个间距的宽度，正好匹配上排元素的空隙位置。
• 如果需要兼容极旧版本浏览器，也可以保留原有inline-block写法，只需给父容器添加font-size: 0消除inline-block默认空白间隙，再给第4个a标签加上150px左边距即可实现同样效果。

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