I was wondering if there is a straightforward method using only CSS and HTML to address this particular issue.
I am in the process of creating a marquee
that displays images within a fixed-width div
. The number of images exceeds the capacity of the div, causing overflow. The basic marquee
function works fine, displaying the overflow images sequentially.
<marquee>
<img ..... />
<img ..... />
<img ..... />
</marquee>
However, I would like to add a caption, specifically the image name below each image. The challenge I'm encountering is that when I attempt to include this using simple markup or CSS, instead of keeping the images within the marquee on a single line, the overflow images outside the div stack up below the initial images. This results in multiple rows as more images are added (not moving within the marquee).
I have experimented with enclosing each image in its own separate div, corresponding to the text below it. Additionally, I've tried utilizing multiple span
elements with a block display and fixed width matching the image width for each image - essentially creating a separate line of text beneath each image.
Further attempts involve using HTML5
tags such as <figure>
and <figcaption>
, but the same issue persists in some form or another.
If there exists a solution to this predicament using solely HTML and CSS, please advise.
P.S. It is worth noting that this page is static.
Thank you in advance.