照片网格适配异常求助：右侧多余间距无法消除

嘿，我帮你排查了代码里的问题，找到照片网格右侧多余间距的根源了，咱们来一步步解决：

问题根源 #

你的网格右侧出现多余空白，主要是两个原因导致的：

1. #photo-gallery 用了 overflow: scroll，再加上父容器的 max-width 和默认 padding，导致容器内部布局超出预期；
2. 用 float 布局时，width:30% 的图片加上 margin:2px，总宽度会超出容器，引发横向滚动或多余空白。

修复方案 #

替换掉容易出问题的 float 布局，改用 Flexbox 实现自适应网格，同时调整容器的 padding 和 overflow 设置：

修改后的完整代码

<ul id="photo-gallery">
 <li>
 <a href="a.jpg" data-description=" Mulak Mar-onan (Kapal Tuktuk)">
 <img src="img/galery/a.jpg" >
 </a>
 </li>
 <!-- 其他照片li重复即可 -->
</ul>

/* 核心网格样式调整 */
#photo-gallery {
  width: 100%;
  list-style: none;
  margin: 0 auto;
  padding: 10px 0; /* 只保留上下内边距，左右设为0避免多余空白 */
  max-width: 780px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px; /* 用gap代替margin，精准控制图片间距，避免叠加问题 */
}

#photo-gallery li {
  flex: 0 0 calc(33.333% - 1.333px); /* 精确计算每个列的宽度，减去gap的影响 */
}

#photo-gallery img {
  width: 100%;
  display: block; /* 去掉图片默认的行内元素间距 */
}

/* 原有样式保留 */
h3 {
  font-size: 20px; 
  color: #fff;
}

#overlay {
  background: rgba(0,0,0, .8); 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  display: none; 
  text-align: center; 
  z-index: 5000;
}

#overlay img {
  margin: 10% auto 0; 
  width: 100%; 
  border-radius: 5px; 
  z-index: 5000; 
  position: relative; 
  padding-top: 113px;
}

关键修改说明

• 用 flex-wrap: wrap 让网格自动换行，彻底避免横向滚动；
• gap 属性比 margin 更适合控制网格间距，不会出现 margin 叠加导致的宽度溢出；
• 通过 calc() 精确计算每个列表项的宽度，确保三个元素刚好占满容器宽度，没有多余空白；
• 移除了 #photo-gallery 的 overflow: scroll（如果不需要强制滚动的话），让布局更自然。

这样调整后，照片网格就能完美适配容器，右侧不会再出现多余间距啦。

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