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做輪播，至於你說的這個，應該能實現，但自己沒做過，沒辦法肯定

#類似於輪播圖佈局，外面藍色容器不設定寬度，100%自適應，而每個子容器的寬度等於父容器的寬度並且一排顯示，父元素超出的部分進行隱藏，在不使用js的情況下能實現嗎？