HTML/CSS相册图片无法自动换行成多行的问题求助

这是CSS布局问题，HTML结构无问题，核心是当前.gallery容器未配置自动换行规则，全屏时宽度足够容纳所有图片，因此呈单行排列。

问题代码小修正 #

你CSS里的gallery { text-align: center; }缺少类选择器的点，应改为.gallery { text-align: center; }，否则该样式不会生效。

解决方案（推荐使用Flexbox） #

Flexbox是现代CSS布局方案，可轻松实现自动换行的整齐布局，修改.gallery及相关CSS如下：

img {
  max-width: 100%;
  height: auto;
}

.gallery {
  display: flex;
  flex-wrap: wrap; /* 开启自动换行 */
  justify-content: center; /* 图片组整体居中 */
  gap: 10px 20px; /* 控制图片上下/左右间距，替代margin */
}

.gallery figure {
  margin: 0; /* 去掉原有margin，用gap统一控制间距 */
  width: 150px;
  vertical-align: middle;
}

.gallery figcaption {
  text-align: center;
  font-size: 11pt;
}

/* 其余原有CSS保持不变 */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 10px;
}

nav a:hover {
  border-bottom: solid 1px #4c1b1b;
  border-top: solid 1px #4c1b1b;
  text-decoration: none;
}

@media screen and (max-width: 1000px) {
  .left,
  .main,
  .right {
    width: 100%;
  }
}

效果说明

• flex-wrap: wrap会让图片在容器宽度不足以容纳所有元素时自动换行
• justify-content: center保证每行图片始终居中对齐
• gap属性更简洁地控制图片间距，避免margin带来的布局冲突

备选方案（基于原有inline-block） #

若想保留inline-block实现，只需给.gallery容器设置最大宽度，让全屏时容器无法容纳所有图片，触发换行：

.gallery {
  text-align: center;
  max-width: 950px; /* 计算逻辑：5张图总宽度=5*(150px+20px左margin+20px右margin)=950px */
  margin: 0 auto; /* 容器居中 */
}

.gallery figure {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
  width: 150px;
  display: inline-block;
  vertical-align: middle;
}

效果说明

浏览器宽度超过950px时，.gallery容器不再变宽，最多容纳5张图片，剩余图片自动换行；窗口缩小时，会根据宽度自动减少每行图片数量。

原问题效果截图 #

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