前端新手HTML/CSS布局最后区块底部出现大空白无法解决求助

错误原因 #

1. 你当前的flex布局下，.activites容器默认align-items: stretch，所有列的高度会被高度最高的子列（也就是.colonnesimple列）强行撑开。而.colonnedouble列里的两个卡片总高度远小于列的总高度，剩余空间就形成了底部空白。
2. 你给figure设置的是百分比高度，但是它的所有父级容器都没有设置明确的固定高度，百分比高度的计算逻辑会出现异常，进一步放大了排版错位的问题。
3. 你给figure设置的左右margin配合calc(100% / 1.2)的宽度写法，没有做多余空间的回收处理，也会导致容器内出现额外空白。

修复方案 #

你只需要修改部分CSS属性即可解决问题，修改后的代码如下：

.activites {
  width: 100%;
  display: flex;
  align-items: flex-start; /* 新增：不让列被强行拉伸到统一高度 */
  gap: 2%; /* 新增：用gap代替margin做列间距，更可控 */
}

.colonnesimple {
  width: 23%; /* 调整宽度，适配gap间距 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.colonnedouble {
  width: 23%; /* 调整宽度，适配gap间距 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 新增：让两个卡片自动分配列内空间，不留空白 */
  min-height: 100%; /* 新增：保证列高度和内容高度匹配 */
}

.colonnesimple img {
  object-fit: cover;
  height: calc(100% - 45px); /* 调整：减去figcaption的高度，避免图片溢出 */
  width: 100%;
  border-radius: 16px 16px 0 0;
}

.colonnedouble img {
  object-fit: cover;
  height: calc(100% - 45px); /* 调整：减去figcaption的高度，避免图片溢出 */
  width: 100%;
  border-radius: 16px 16px 0 0;
}

.activites .colonnesimple figure {
  width: 100%; /* 去掉之前的calc计算，直接占满列宽 */
  height: 450px; /* 改成固定高度，排版更稳定，你可以根据需求调整数值 */
  margin: 0; /* 去掉之前的左右margin，用外层gap做间距 */
  box-shadow: 0px 0px 10px #55555538;
  border-radius: 16px 16px 16px 16px;
  cursor: pointer;
}

.activites .colonnedouble figure {
  width: 100%; /* 去掉之前的calc计算，直接占满列宽 */
  height: 210px; /* 改成固定高度，两个加起来和左边单卡片高度差不多，你可以根据需求调整 */
  margin: 0 0 20px 0; /* 只保留底部间距，作为两个卡片之间的间隔 */
  box-shadow: 0px 0px 10px #55555538;
  border-radius: 16px 16px 16px 16px;
  cursor: pointer;
}
/* 最后一个双列卡片去掉底部margin，避免多余空白 */
.activites .colonnedouble figure:last-of-type {
  margin-bottom: 0;
}

.activites .colonnesimple figure figcaption {
  padding: 10px;
  position: relative;
}

.activites .colonnedouble figure figcaption {
  padding: 10px;
  position: relative;
}

你可以根据自己需要的卡片尺寸调整height的数值，上面的数值是参考你原来的比例设置的。如果想要适配不同屏幕尺寸，可以把固定高度换成aspect-ratio属性，比如给.colonnesimple figure加aspect-ratio: 1/2.5，给.colonnedouble figure加aspect-ratio: 1/1.2，响应式效果会更好。

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