Html CSS3幻灯片：如何为每个图像显示文本？

我目前正在CSS3中制作幻灯片，我想为我的每个图像显示一个文本。我使用这个例子：，但我没有使用完全相同的代码，因为我的代码是响应的

以下是我的HTML代码：

<div id="slideshow">
    <div id="slideshow-container">
        <div id="slider">
            <figure>
                <img src="images/image-1.jpg" alt="">
                <figcaption>Style 1</figcaption>
            </figure>
            <figure>
                <img src="images/image-2.jpg" alt="">
                <figcaption>Style 2</figcaption>
            </figure>
            <figure>
                <img src="images/image-3.jpg" alt="">
                <figcaption>Style 3</figcaption>
            </figure>
            <figure>
                <img src="images/image-4.jpg" alt="">
                <figcaption>Style 4</figcaption>
            </figure>
        </div>
        <span id="timeline"></span>
    </div>
</div>

不添加figcaption标记的结果：

我想为我的每一张图片都显示一段文字，但我不知道怎么做

这里是带有figcaption标签的结果：nextgenfocus.com/slideshow2

我补充说：

#slider figcaption
{
    position: absolute;
    margin: 0;
    padding: 20px 20px;
    right: 0;
    bottom: 5px;
    left: 0;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgb(225, 225, 225);
    color: #555;
}

但是文本没有出现

---

如果您找到了解决方案，谢谢。

问题出在图像上的

浮动：left

，这使您的

高度为零。将

宽度：20%

和

浮动：左

移动到

并将图像更改为

宽度：100%

。它会成功的

#slider figure
{
    position: relative;
    margin: 0;
    width: 20%;
    float: left;
}

#slider img
{
   width:100%;
}

这是一本书

---

希望有帮助：）

我刚刚下载了你的脚本并复制了代码，它正在工作，并显示了我这边的文本，只是图像被扭曲了。你能给我们提供更多的细节或你迄今为止所取得的成就的演示，以便我们提供帮助吗？非常感谢，老兄！这对我的经验帮助很大。很高兴能帮上忙！玩得开心！

#slider figure
{
    position: relative;
    margin: 0;
    width: 20%;
    float: left;
}

#slider img
{
   width:100%;
}