如何防止同排图片屏幕水平缩小时换行？两种布局需求

云原生阿岚

2026-5-28

嘿，这两个需求都能轻松实现，而且完全不用写媒体查询，用Flexbox就能搞定，我给你分两个方案详细说：

方案1：图片开始重叠时自动隐藏超出部分

我们可以借助Flexbox布局来实现自适应的隐藏效果，修改后的CSS如下：

#div {
  display: flex; /* 让子元素（图片）在同一水平行排列 */
  overflow: hidden; /* 超出容器宽度的部分直接隐藏 */
}

img {
  height: 200px;
  flex-shrink: 0; /* 禁止图片被压缩变形，保持原始尺寸比例 */
}

HTML部分不需要修改，保持你原来的结构就行。

原理说明：

display: flex 会让所有图片默认在同一水平行排列，替代原来的float布局（float在容器缩小时会自动换行，这也是你之前堆叠的原因）
flex-shrink: 0 确保图片不会因为容器变窄而被压缩，始终保持设置的高度和自身比例
当容器宽度小于所有图片的总宽度时，超出容器的图片会被overflow: hidden直接隐藏，看起来就像是重叠的部分“消失”了

方案2：图片开始重叠时出现横向滚动条

同样用Flexbox，只需要调整容器的溢出属性，就能实现滚动效果，修改后的CSS如下：

#div {
  display: flex; /* 让图片保持在同一水平行 */
  overflow-x: auto; /* 水平方向超出时显示滚动条 */
  padding-bottom: 8px; /* 给滚动条留一点空间，避免贴紧图片 */
}

img {
  height: 200px;
  flex-shrink: 0; /* 禁止图片被压缩 */
  margin-right: 8px; /* 给图片之间加一点间距，看起来更美观 */
}

img:last-child {
  margin-right: 0; /* 去掉最后一张图片的右侧间距，避免多余空白 */
}

HTML部分同样不需要修改。

原理说明：