移动端图片显示异常求助：超出项目区域并排版错乱

咱们先拆解下问题的核心根源：

• 你的#projects设置了固定的height:100vh，当移动端内容高度超过视口时，必然会溢出到下方的contact区域；
• .img-wrap的Flex布局默认是横向排列，在窄屏幕下图片和文字会挤在一起，导致排版错乱，没法正常垂直逐个排列。

下面是具体的修复步骤：

1. 解决容器溢出问题 #

把固定高度改成最小高度，让容器能根据内容自动撑开，同时保留至少占满一屏的特性：

#projects {
  width: 100%;
  min-height: 100vh; /* 替换原来的height:100vh */
  background-color: #eee;
  /* 可选：如果内容过多，允许容器内滚动 */
  /* overflow-y: auto; */
}

2. 修复移动端图片块排版 #

调整.img-wrap的Flex方向为垂直排列，再给元素间加些间距优化观感：

.img-wrap {
  padding-top: 20px;
  display: flex;
  flex-direction: column; /* 设置垂直排列 */
  gap: 15px; /* 图片和文字之间的间距，可根据需求调整 */
  position: relative;
  overflow: hidden;
}

3. 可选优化：确保图片自适应宽度 #

你的.img-img已经设置了width:100%，这个可以保留，确保图片在移动端能撑满父容器宽度，不会出现错位：

.img-img {
  border-radius: 12px;
  max-width: 270px;
  width: 100%;
}

最终修改后的完整CSS #

#projects {
  width: 100%;
  min-height: 100vh;
  background-color: #eee;
}
.img-wrap {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  overflow: hidden;
}
.img-img {
  border-radius: 12px;
  max-width: 270px;
  width: 100%;
}

这样修改后，移动端每个图片块会整齐垂直排列，#projects容器会随内容自动调整高度，不会再溢出到contact区域，同时桌面端的3列布局也能正常保留。

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