Question

编辑：

良好的进展......通过更新以下代码，我几乎得到了我想要实现的目标，但我不明白为什么它几乎可以运作。过渡期间两侧间距，过渡后隐藏间距，但并略微削减图像：https://codepen.io/anon/pen/LWqPJB

body { 
     margin: -6%; 
} 
div#slider { 
     overflow: hidden; 
}
div#slider figure img { 
     width: 18%; 
     float: left; 
     padding-left: 1%; 
     padding-right: 1%;
}

虽然，这不是一个完美的解决方案，但似乎可以胜任的第二种选择是：

div#slider {
    margin-left: -6%;
    margin-right: -6%;
    overflow: hidden;
}
div#slider figure img {
    width: 18%; 
    margin-left: 1%;
    margin-right: 1%;
    float: left;
}

问题

我正在使用HTML和CSS在网页中实现简单的图片幻灯片。我开始使用的代码位于https://codepen.io/anon/pen/wJRVwP

下方

目前每张幻灯片都是下一张幻灯片，图片之间没有空格（图片1 ）。但是，我试图在每个图像之间添加一个100px的空间，该空间仅在转换期间可见。因此，尝试添加间隙，我更改下面的CSS代码;

从：

div#slider figure img { width: 20%; float: left;}

（演示1： https://codepen.io/anon/pen/wJRVwP）

为：

div#slider figure img { width: 20%; float: left; padding-left: 100px;}

（演示2： https://codepen.io/anon/pen/vxvoNy）

更改代码的结果在所有图像之间增加了100px空间，但，代码更改引入了一个新问题 - 图像不再对齐，并且每次幻灯片更改后逐渐变得更糟（ image 2 ）。

问题

如何在图像之间实现空间并修复此问题？在代码中，如何   我可以更改CSS代码以在每个图像之间添加100px空间，和保持   在过渡期间和之后对齐的所有图像？

图片

过渡期间的演示1。

演示1。

要求的结果。

代码

https://codepen.io/anon/pen/wJRVwP

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

body {
  margin: 0;
}

div#slider {
  overflow: hidden;
}

div#slider figure img {
  width: 20%;
  float: left;
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite;
}

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
  <figure>
    <img src="austin-fireworks.jpg" alt>
    <img src="taj-mahal_copy.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
    <img src="ankor-wat.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
  </figure>
</div>

Answer 1

将"git.confirmSync": false属性应用于所有box-sizing:border-box。左右添加填充（如果你不填充两边，看起来有些奇怪）。

这些是css调整

img

下面的代码段

＆＃13;

div#slider figure img { 
    width: 20%; 
    float: left; 
    padding-right: 50px;
    padding-left: 50px;
    box-sizing:border-box
}

＆＃13;

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

body {
  margin: 0;
}

div#slider {
  overflow: hidden;
}

div#slider figure img {
  width: 20%;
  float: left;
  padding-right: 50px;
  padding-left: 50px;
  box-sizing: border-box
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite;
}

＆＃13;

Answer 2

Change the CSS like below:
@keyframes slidy {
    0% { left: 0%;}
    20% { left: 0%; }
    25% { left: -100%;}
    45% { left: -100%; }
    50% { left: -200%; margin-left: 100px;}
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; margin-left: 0px;}
}

Answer 3

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="austin-fireworks.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>
<style>
    @keyframes slidy {
        0% { left: 0%; }
        20% { left: 0%; }
        25% { left: -100%;}
        45% { left: -100%; }
        50% { left: -200%; }
        70% { left: -200%; }
        75% { left: -300%; }
        95% { left: -300%; }
        100% { left: -400%;}
    }
    body { margin: 0; } 
    div#slider { overflow: hidden;}
    div#slider figure img { 
        width: 19%; float: left;margin-left:0.5%;margin-right:0.5%;
    }
    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0px;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 20s slidy infinite; 

    }

</style>

如何在CSS图像幻灯片中添加图像之间的空格？

3 个答案: