Question

我需要在画廊的某些缩略图上应用小图像，小徽章（右下角）。代码由插件自动生成，如下所示。我无法更改标签的顺序，但我可以编辑标有*的两行（即添加一个类，从span更改为div）它适用于顶部但不适用于底部（顶部：0px;右：4px）不知道为什么。

<a href="/photos/fullpic.jpg">
<span>
*<span style="position: relative; display: block;">
     <img src="/photos/mythumbnail.jpg" alt="thumbnail">
    *<img src="/photos/plugins/badge.png" style="position: absolute; bottom: 0px; right: 4px;">
   </span>
</span>

编辑：忘记添加。每个缩略图都有不同的高度/宽度，因此我无法声明容器的高度。无论容器的尺寸如何，它都需要向右下方。

Answer 1

它适用于我，但您必须删除display:block;

的<span>

什么是“包装器”<span>？

Answer 2

一个问题是display:block正如@MatTheCat所提到的，另一个问题是跨度内的空白和文本..

您应该将文本与徽章一起包裹在span / div中，并将其设置为相对定位。对于空白区域，您可以将font-size和line-height设置为0。

示例http://jsfiddle.net/PEmEy/

在右下角应用图片

2 个答案: