为使用同位素定位的照片添加说明

问题描述

我很难为图库中的照片添加标题。我不知道如何使标题位于图像的顶部。这是这里的画廊https://memsmosaics.com/gallery.html

现在我已经放入了 3 个示例标题，它们旨在位于前 3 个图像的顶部：蝙蝠、蜜蜂和飞蛾。如您所见，每个标题都像普通块元素一样位于前一个标题下方。

这是这 3 张图片和标题的 html：

<figure>
  <figcaption>bat</figcaption>
  <a href='../images_organised_large/art_for_sale/Bat. $450 .jpg' target=blank>
    <img src='../images_organised_small/art_for_sale/Bat. $450 .jpg' class='all forsale'>
  </a>
</figure>

<figure>
  <figcaption>bees</figcaption>
  <a href='../images_organised_large/art_for_sale/Cicardas 3. $1,500 .jpg' target=blank>
    <img src='../images_organised_small/art_for_sale/Cicardas 3. $1,500 .jpg' class='all forsale'>
  </a>
</figure>

<figure>
  <figcaption>moth</figcaption>
  <a href='../images_organised_large/art_for_sale/golden musical moth $1,200.jpg' target=blank>
    <img src='../images_organised_small/art_for_sale/golden musical moth $1,200.jpg' class='all forsale'>
  </a>
</figure>

我试过浮动 <figure> 标签并赋予它们与图像宽度相等的宽度，但这也不能解决问题。一开始可能看起来像，但是一旦缩小屏幕，标题就不会停留在图像顶部。这个 CSS 现在不在那里，但它看起来像这样：

figcaption {
    float: left;
    width: 300px;
}

我想解决这个问题需要更好地了解同位素的工作原理。将不胜感激任何帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）