gpt4 book ai didi

javascript - 在相对定位的 div 内定位跨度

转载 作者:行者123 更新时间:2023-11-28 13:16:10 25 4
gpt4 key购买 nike

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

不幸的是,当 image 向右浮动时,有一个正的 margin-left 值并且比包含它的 div 更宽(image+margin),有一个问题。 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(因此不能在图像上使用绝对定位)。

最佳答案

您的 span 是绝对定位的,因此不能向左或向右浮动。

这是我的版本:

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

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

现在您可以将 img + span 放在任何地方。

关于javascript - 在相对定位的 div 内定位跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15009033/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com