Css 图库图片重叠导致浏览器宽度受限答案

【问题标题】：Css gallery images overlap cause the browser width is limitedCss 图库图片重叠导致浏览器宽度受限
【发布时间】：2019-12-24 11:35:17
【问题描述】：

enter image description here图像库代码添加更多图像，图像重叠导致浏览器宽度受限；根据 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>

【问题讨论】：

标签： javascript css

【解决方案1】：

我添加了更多图像，这就是你所说的重叠，我看到它可以正常工作。

看看这个：

.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>

【讨论】：

感谢明天尝试
这是一个忙碌的节日，现在又开始工作了；是的，你的看起来不错，让我在回复你之前检查一下我的情况；谢谢，新年快乐