Html 在div中将图像与溢出并排

所以我想在一个边框内显示一个图像，然后在该图像后面有大约2-3个图像，但我只想看到第一个图像的第一部分。 大概是这样的：

然后我需要隐藏边界以外的所有数字，但是在第一个图像旁边应该还有2-3个这样的图像，但是是隐藏的

有办法吗

编辑：
HTML:

我投了一票

样式=高度20像素，宽度20像素（您可以输入您的值）

样式=边框线：实线和边框宽度：5px（可以输入值）

最重要的部分：溢出：隐藏

如果溢出可见，则图片将按原样显示，而不考虑div，如果它是隐藏的，则仅显示符合div高度和宽度的内容

*编辑：通过将它们一个接一个地放置，它们将并排放置 此外，我可以推荐的是，为此目的使用跨距

*编辑2：更改了代码段，添加了一个大图像，并集成了两个按钮来移动其位置

现在，你可以（在油漆或其他东西中）制作一个大图像，而不是3个小图像，以使其成为一个类似于移位的规则：）

希望我能帮忙

函数getPosition（）{ var img=document.getElementById（“img”）； var rect=img.getBoundingClientRect（）； 警报（“坐标：“+rect.left+”px、+rect.top+”px”）； } 函数scrollImgLeft（）{ var img=document.getElementById（“img”）； var rect=img.getBoundingClientRect（）； document.getElementById（“img”）.style.position=“relative”； document.getElementById（“img”）.style.left=（rect.left-20）+“px”； } 函数scrollImgRight（）{ var img=document.getElementById（“img”）； var rect=img.getBoundingClientRect（）； document.getElementById（“img”）.style.position=“relative”； document.getElementById（“img”）.style.left=（rect.left+20）+“px”； }

左边
赖特
获取位置

您可以使用溢出：隐藏来隐藏div中的元素 使用float：左图像并排出现。所以，在下面的代码中，我有很多图片，但只有8个显示其余的都隐藏了

.roulette{
宽度：200px；
高度：25px；
外形：2倍纯红；
溢出：隐藏；
浮动：左；
} 
.轮盘赌{
宽度：25px；/*8个图像用于.roulette{*/
高度：25px；
浮动：左；
}

我有一个问题。我制作了这个jsfiddle，但为什么溢出：隐藏在这种情况下不起作用？我尝试过做

float:left；

但它们保持在彼此下面它有点起作用我只看到了第一个图像一点点，但它们仍然在彼此下面，即使我使用

float:left；

你希望它们是bes是的，我最终想做的是让3张相同的图片彼此相邻，只看到第一张图片的一小部分，然后点击一个按钮，将3张图片向左滚动一个随机数量的像素，在第一张图片之后添加下一张图片，我只是更新了答案这不会有任何区别ce如果我把它们并排放在代码中，对吗？尽管如此，我还是试过了，但不起作用

<div class="roulette">
    <img src="../application/views/img/cases.png">
    <img src="../application/views/img/cases.png">
    <img src="../application/views/img/cases.png">
    <img src="../application/views/img/cases.png">
</div>