如何在html/css的mobile/tablet视图中水平滚动内容

我正在制作一张图片，其中我想水平滚动条带、全球特许经营和其他图片，如小提琴中的一行所示。图像上方的文本应保持固定位置

我想在移动视图中看到的内容片段如下所示。图像应水平滚动，而不会在右侧产生任何空白

此时，图像适合手机屏幕，但它们是压缩的，因此我想让内容在手机视图中滚动，以避免压缩问题

我使用的CSS代码用于在移动视图中匹配屏幕上的图像，它们是：

.images {
  display: flex;
  align-items:center;
  background-color: #eee;
  padding: 1rem;


}

.images > div {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.images img {
  max-width:100%;
  width: 100%;
}

问题陈述：

---

我想知道我应该在小提琴中添加什么CSS代码，这样图像就可以水平滚动，而不会在右侧创建任何空白，文本固定在顶部

为此，您肯定需要JavaScript。听起来你可能会从Ken Wheeler的作品中获益。@Obsidiage我想知道你能否给我一个如何做到这一点的指针。我以前从未这样做过。恐怕你的问题太广泛了，我在现阶段无法提供帮助。就像你想要一个无限循环的横幅旋转？所以当一个元素被分流到右边时，它会出现在最左边？这是永久性的，还是由用户以某种方式触发的？如果它一直在滚动，这会不会让用户很难点击任何元素？这些都是很好的问题。我有一个我正试图复制的设计。任何在移动视图中看起来不错，内容水平滚动的东西都适合我。正如你所说，是的，这对用户来说肯定很难，这就是为什么我们要为这些图像设置间距和特定高度（带有一些背景色）的原因。如果您还有任何问题，请告诉我。您可以通过媒体查询删除这些属性