将跨度定位在相对定位的div内

时间:2013-02-21 17:53:28

标签: javascript html css

我正在使用Wordpress插件,我遇到了定位span的问题。基本上,有一个div包含imgspandivspan在插件中动态添加,但我不认为应该涵盖img,这就是这里的情况。加载图像后动态设置span的大小,浮动和边距,因此span完全覆盖图像。

不幸的是,当image向右浮动时,具有正余量左边值并且比包含它的div更宽(图像+边距),这是一个问题。 image的左边距已更改,但span的左边距未更改,因此span未正确覆盖图像。有没有办法解决这个问题或一个好的解决方法?我的意思是在其他情况下可以很好地工作,比如漂浮图像,等等。我注意到它在Chrome,IE9和FF19上的工作方式类似。

示例:http://jsfiddle.net/6zQp3/1/

更新 我不认为我已经很好地解释了这个问题,所以这是另一个例子:

http://jsfiddle.net/6zQp3/53/

我已经指出了代码的哪些部分可以改变,哪些部分我不能改变。基本上,该插件动态地为网站上的每个图像创建div.image-containerspan.cover(我在这里省略了这部分,因为它并不真正相关)。 span.cover应完全覆盖图像。正如您在此新示例中所看到的,第一张图像未正确覆盖,而其他图像则未正确覆盖。这是我的问题 - 调整JavaScript和css,以便在这种情况下它也能正常工作。请注意,我无法修改图像的CSS(因此不能选择使用图像上的绝对定位)。

1 个答案:

答案 0 :(得分:0)

您的span位于绝对位置,因此无法向左或向右浮动。

以下是我的版本:

A) http://jsfiddle.net/6zQp3/47/

B) http://jsfiddle.net/6zQp3/49/

现在你可以将img + span定位在任何地方。