在此处输入图像描述图像库代码 添加更多图像时，图像重叠导致浏览器宽度受到限制; 根据Mozilla开发人员工具，浏览器宽度为1247，高度为300
如何添加更多图像
<html>
<head>
<title>Computer Science</title>
</head>
<style>
.yndr
{
float:left;
animation:droyd 10s infinite;
}
.yndroid
{
width: calc(500px * 3);
}
.yndroidr
{
width: 400px;
overflow: hidden;
margin: 150px auto;
height:300px;
}
@keyframes droyd
{
10%
{
transform: translateX(-420px);
}
20%
{
transform: translateX(-840px);
}
30%
{
transform: translateX(-1260px);
}
40%
{
transform: translateX(-840px);
}
}
</style>
<body>
<div class="yndroidr">
<div class="yndroid">
<div class=yndr><img src="iron.gif" width="400" height="200" alt="cy"/></div>
<div class=yndr><img src="airconditioner.gif" width="400" height="200" alt="cy"/></div>
<div class=yndr><img src="geyser.gif" width="400" height="200" alt="cy"/></div>
<div class=yndr><img src="battery.gif" width="400" height="200" alt="cy"/></div>
</div>
</div>
</body>
我添加了更多图像，这就是你所说的重叠吗，我看到它正常工作。
看看这个：
.yndr
{
float:left;
animation:droyd 10s infinite;
}
.yndroid
{
width: calc(500px * 3);
}
.yndroidr
{
width: 400px;
overflow: hidden;
margin: 150px auto;
height:300px;
}
@keyframes droyd
{
10%
{
transform: translateX(-420px);
}
20%
{
transform: translateX(-840px);
}
30%
{
transform: translateX(-1260px);
}
40%
{
transform: translateX(-840px);
}
}<body>
<div class="yndroidr">
<div class="yndroid">
<div class="yndr"><img src="https://via.placeholder.com/150" alt="cy" /></div>
<div class="yndr"><img src="https://via.placeholder.com/151" alt="cy" /></div>
<div class="yndr"><img src="https://via.placeholder.com/152" alt="cy" /></div>
<div class="yndr"><img src="https://via.placeholder.com/153" alt="cy" /></div>
<div class="yndr"><img src="https://via.placeholder.com/154" alt="cy" /></div>
<div class="yndr"><img src="https://via.placeholder.com/155" alt="cy" /></div>
<div class="yndr"><img src="https://via.placeholder.com/156" alt="cy" /></div>
<div class="yndr"><img src="https://via.placeholder.com/157" alt="cy" /></div>
</div>
</div>
</body>