Div内图片元素自动换行问题：实现横向滚动需求求助

我帮你排查了下，你遇到的图片自动换行、没法横向滚动的问题，核心是没让容器内的图片保持在同一行，同时正确配置横向溢出规则。这里给你几个实操的修改方案：

1. 给容器设置横向溢出+强制不换行 #

先给你的.colourway-extension-wrapper加上这几个关键样式：

.colourway-extension-wrapper {
  /* 保留你原有的position、bottom、max-height、width属性 */
  overflow-x: auto; /* 超出宽度时显示横向滚动条 */
  overflow-y: hidden; /* 隐藏纵向多余的溢出 */
  white-space: nowrap; /* 强制内部元素不换行 */
}

2. 让图片保持行内布局 #

默认图片是行内元素，但如果你的样式里把它改成了块级，就会占满一行导致换行。所以要确保图片是行内块或者用flex布局：

• 方案A：行内块实现

.colourway-extension-wrapper img {
  display: inline-block;
  vertical-align: top; /* 去掉图片之间的默认空隙 */
}

• 方案B：Flex布局（更推荐，适配性更好）
  把容器改成flex容器，内部图片默认会在一行排列，超出就触发滚动：

.colourway-extension-wrapper {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  /* 保留其他原有属性 */
}
.colourway-extension-wrapper img {
  flex-shrink: 0; /* 禁止图片被压缩变形 */
}

3. 清理干扰布局的属性 #

检查下有没有给容器或者图片加过float、clear这类会打乱行布局的属性，如果有的话记得移除。

结合你代码的完整示例 #

调整后的Sass代码大概是这样：

.colourway-extension-wrapper {
  position: absolute;
  bottom: 0;
  max-height: 185px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  gap: 10px; /* 可选：给图片之间加些间距，看着更舒服 */
  
  img {
    flex-shrink: 0;
    height: 100%; /* 让图片高度适配容器 */
    object-fit: cover; /* 可选：防止图片拉伸变形 */
  }
}

改完之后，当图片总宽度超过容器宽度时，就会自动出现横向滚动条，图片也能乖乖保持在同一行啦～

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