Html 在幻灯片图像旁边添加文本

这是一段代码，我对其进行了一点修改，以制作一个仅使用HTML和CSS的图像的简单幻灯片：

（这是代码的一部分，要查看所有内容，请单击演示）

代码：

。幻灯片放映{
宽度：800px；
保证金：0自动；
溢出：隐藏；
边框：纯色1px白色；
}
.slideshow容器{
宽度：2500px；
字号：0；
过渡：1s轻松；
身高：225px；
}
@关键帧滑动{
0% {
转化：translateX（0%）；
}
12.5% {
转化：translateX（0%）；
}
25% {
转化：translateX（-25%）；
}
37.5% {
转化：translateX（-25%）；
}
50% {
转化：translateX（-50%）；
}
62.5% {
转化：translateX（-50%）；
}
75% {
转化：translateX（-75%）；
}
87.5% {
转化：translateX（-75%）；
}
99% {
转化：translateX（-75%）；
}
100% {
变换：translateX（0）；
}
}

---

您将把

图像

和

文本

部分包装成一个

.item

div

将

display:flex

应用于父级

.slideshow container

以设置一行中的

.item

然后只需将

width:50%

应用于

img

和

.caption

div，将它们与屏幕的一半对齐即可

还根据一行中的3个项目更改了动画分区值

堆栈片段

/*常规样式*/
身体{
填充：3em；
背景色：#ccc；
}
html{
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
/*幻灯片样式*/
.幻灯片放映{
宽度：800px；
保证金：0自动；
溢出：隐藏；
边框：纯色1px白色；
}
.项目{
显示器：flex；
宽度：800px；
对齐项目：居中；
}
.slideshow容器{
宽度：2400像素；
过渡：1s轻松；
显示器：flex；
}
.slideshow容器：悬停{
动画播放状态：暂停；
}
.幻灯片{
动画：幻灯片24秒轻松无限；
}
@关键帧滑动{
0% {
转化：translateX（0%）；
}
25% {
变换：translateX（0）；
}
37.5% {
转化：translateX（-33.333%）；
}
62.5% {
转化：translateX（-33.333%）；
}
75% {
转化：translateX（-66.667%）；
}
99% {
转化：translateX（-66.667%）；
}
100% {
变换：translateX（0）；
}
}
.项目img{
宽度：50%
}
.项目.标题{
宽度：50%
}

正文
正文
正文

看看这个bro-->hm，尝试创建容器div，包括图像和文本，并设置样式。20%的文本宽度，另外80%的图像宽度。如果我把每个img放在一个div中，只有第一张图片显示其他图片不太感谢！