带有标题的选框图像答案

【问题标题】：Marquee images with caption带有标题的选框图像
【发布时间】：2014-12-18 21:29:03
【问题描述】：

我想知道是否有一个简单的纯 css/html 方法来解决这个问题。
我正在创建一个marquee 的图像，在一个固定宽度的div 内。这里面的图像很多，即它们很容易溢出div。这组图像上的简单marquee 很简单，默认情况下效果很好。溢出的图像简单地依次显示。
<marquee>
<img ..... />
<img ..... />
<img ..... />
</marquee>

但我想要一个标题，即每张图片下方的图片名称。我面临的问题是，当我尝试使用简单的标记或 CSS 添加它时，而不是将图像 marquee 放在一行中，溢出 div 而没有 marquee 的图像会包裹在第一张图像下方。这意味着，图像越多（在静止的div 之外），行数就越多。

我尝试将每个图像都包含在一个单独的 div 中，并写在图像下方。此外，对于每个图像，使用多个带有显示块的 span 元素并固定宽度等于图像宽度，即图像下的单独文本行。
另外，我尝试过使用<figure> 和<figcaption> 的HTML5 标签，但每次都会以某种方式出现相同的问题。

如果仅使用 HTML 和 CSS 有任何可能的解决方案，请提出建议。
附言此页面是静态的。

提前致谢。

【问题讨论】：

如果没有工作示例或更多代码，这可能会很困难！
Rijul，如果合适，请接受我的回答！

标签： html css

【解决方案1】：

marquee 元素是一个proprietary tag，对于 HTML4 和 HTML5 来说是一种糟糕的做法。 W3C 说 HTML 仅用于标记，而不用于格式化或动画。您可以根据网络标准尝试其中一种选择：

JavaScript 或 jQuery

在 Javascript 或 jQuery 中使用 slider script。

CSS3

使用CSS3 创建选取框动画。

【讨论】：

实际上，这仍然没有解决我的问题。问题在于仅使用 HTML/CSS。我知道存在许多 javascript 或 jquery 库。
正如我所说marquee 不是一个好选择。你应该学习 CSS3 动画。

【解决方案2】：

<html>
<head>

</head>
<body>
<marquee direction="left"><table><tr><td style="min-width:250px;"><img src="images/img1.png"  alt="" style="width:155px;height:79px;" /><img src="images/img2.png"  alt="" style="width:155px;height:79px;" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</br></br><span style="padding-right:20%;">Add tittle-1 here</span><span style="padding-right:20%;">Add tittle-2 here</span></td></tr></table></marquee>
</body>
</html>

【讨论】：