javascript - css轮播图适应布局问题

Question

类似于轮播图布局，外面蓝色容器不设置宽度，100%自适应，而每一个子容器的宽度等于父容器的宽度并且一排显示，父元素超出的部分进行隐藏，在不使用js的情况下能实现吗？

学习ing · Answer

纯靠CSS就可以实现类似效果：

HTML：

CSS：
.p1{
    animation: pleft 6s infinite linear;
    -webkit-animation: pleft 6s infinite linear;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}
@keyframes pleft{
    0%{left: 200%}
    100%{left: -100%}
}
.p2{
    animation: pmid 6s infinite linear;
    -webkit-animation: pmid 6s infinite linear;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-delay:2s;
    -webkit-animation-delay:2s;
}
@keyframes pmid{
    0%{left: 200%}
    100%{left: -100%}
}
.p3{
    animation: pright 6s infinite linear;
    -webkit-animation: pright 6s infinite linear;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-delay:4s;
    -webkit-animation-delay:4s;
}
@keyframes pright{
    0%{left: 200%}
    100%{left: -100%}
}

jsfiddle.net看看是不是你想要的

学习ing · Answer

想了两种方法: flex 与 inline-block
容器设了宽度是为了便于观察.
按理来说用定位也是可以的.但是得一个一个设置定位, 就没弄了.

https://jsfiddle.net/m41tLwqb/1/
https://jsfiddle.net/2zcqqj26/

女神的闺蜜爱上我 · Answer

曾用纯CSS做轮播，至于你说的这个，应该能实现，但自己没做过，没法肯定