html - Make text sit below lightbox image

Question

I have a gallery which has a number of images. They have a set width and no height to the image and the height is obviously just what the image is, so one could be 500px in height and the next one could be 620px in height.

Here is the css for this:

.mygallery { width: 650px; padding:0; margin:0; }

I have a caption which needs to go directly below the image and the css for this is:

#category span{color:#FFFFFF;}

Can anyone help me how I can put the category span below my gallery. I just cannot get it to go underneath. Obviously it would be fine if all the images were the same height, but as they are all different its proving difficult.

Thanks for your help.

Answer 1

HTML 中图像的自然结构是这样的：

<figure>
  <img>
  <figcaption></figcaption>
</figure>

可以将figure元素设为一个inline-block（如果您想在一行中列出多个元素），其余元素通常显示为blocks. 这种结构应该可以做你想做的事。span必须去——或者被告知作为一个block元素显示——这是问题的一部分。