html - 使文本 位于灯箱图像下方

Question

我有一个画廊，里面有很多图片。它们有一个设置的宽度，没有图像的高度，高度显然就是图像的高度，所以一个高度可能是 500px，下一个高度可能是 620px。

这是这个的CSS:

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

我有一个标题，需要直接放在图片下方，CSS 是:

#category span{color:#FFFFFF;}

任何人都可以帮助我如何将类别跨度放在我的画廊下方。我就是不能让它走到下面。显然，如果所有图像的高度都相同，那会很好，但由于它们都不同，所以很难证明。

感谢您的帮助。

Answer 1

HTML 中图像的自然结构应该是这样的:

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

figure 元素可以做成 inline-block(如果你想在一行中列出多个元素)，其余的通常显示为 block 。这种结构应该可以做你想做的事。 span 必须离开——或者被告知显示为 block 元素——这是这里问题的一部分。