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做轮播，至于你说的这个，应该能实现，但自己没做过，没法肯定

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

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