Javascript 伸缩式大屏幕div

我试图创建一个无限的水平“滚动”，就像一个选框效果（例如）

这是我的代码：

.parent{
边框：1px纯黑；
宽度：100%；
高度：2em；
}
.集装箱{
身高：100%；
显示器：flex；
左：10%；
边框：1个实心番茄；
动画：字幕5s线性无限；
}
@关键帧选框{
0% {
转换：转换（0%，0）；
}
100% {
转换：转换（-100%，0）；
}
}
.儿童1{
宽度：10雷姆；
身高：100%；
背景色：#84B7DF；
}
.儿童2{
宽度：18rem；
身高：100%；
背景色：#f58db6；
}
.儿童3{
宽度：13雷姆；
身高：100%；
背景色：#ffc410；
}
.儿童4{
宽度：21rem；
身高：100%；
背景色：#C8E7C1；
}

---

您只需添加一个具有相同子元素的多个容器元素，然后在父元素上使用

display:flex

和

overflow:hidden

。您还可以使用

vw

单位和

flex

属性将

.container

元素的宽度设置为大于窗口宽度

如果必须，请调整

容器上的
宽度
和
填充
属性


.parent{
边框：1px纯黑；
宽度：100%；
高度：2em；
显示器：flex；
溢出：隐藏；
}
.集装箱{
身高：100%；
弹性：0 120vw；
显示器：flex；
右：10%；
边框：1个实心番茄；
动画：字幕5s线性无限；
}
@关键帧选框{
0% {
转换：转换（0%，0）；
}
100% {
转换：转换（-100%，0）；
}
}
.儿童1{
宽度：10雷姆；
身高：100%；
背景色：#84B7DF；
}
.儿童2{
宽度：18rem；
身高：100%；
背景色：#f58db6；
}
.儿童3{
宽度：13雷姆；
身高：100%；
背景色：#ffc410；
}
.儿童4{
宽度：21rem；
身高：100%；
背景色：#C8E7C1；
}

您必须手动循环元素。这意味着复制开头的内容并将其附加到后面。你不断地这样做，然后你就有了效果。调整
.child
元素的宽度，使它们的总和等于
.container
@Nimsrules的宽度。你能举个例子吗？这是一个简单的例子，假设我没有固定宽度的子元素，但它们的宽度取决于它们的内容。@CodeSpirit你能发布一个例子吗？看看这篇文章-这不是一个好的解决方案。在大屏幕上测试它@Buster您可以使用
flex
将容器的宽度设置为大于窗口宽度。对不起，我不明白您能更好地解释什么是
flex:0 120vw意味着什么？为什么
120vw
？请看，
120vw
只是随机选取，关键是它比窗口大，您应该根据实际示例和动画速度和填充来定制。