Question

我需要在我的博客图片上放置缩放图标。

简单图像的简单（我使用jQuery添加＆lt; span＆gt;元素）：

<a href="..." rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"/> <img src="img.jpg" /> </a>

但有些图像有“float：left”或“float：right”对齐方式。如何放置＆lt; span＆gt;浮动图像？

示例：http://jsfiddle.net/4Nvbe/1/

Answer 1

问题似乎是你的HTML结构，你是否有使用跨度的特殊原因？一个div似乎正在做这个伎俩。

这里有一个工作演示http://jsfiddle.net/4Nvbe/但是如果你试图改变它来添加一个div，那么标记看起来像：

<a href="..." rel="lightbox"><div style="position:absolute; background-image: url(zoom.png);"/><img src="img.jpg" /></a>

它可能会解决您的问题。

在我的例子中，我也使用了一个类，这样样式/视觉控制留在样式表中，而不是流入你的JS。

Answer 2

这是一个可能的解决方案，但它将在很大程度上取决于你的其他风格。

我已经放置了位置：亲戚并将浮动移动到了锚点（其余代码可能会阻止您这样做我承认。请参阅the fiddle以查看它的实际效果。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    img {width:30px;height:30px;border:1px solid red;display:block;margin:3px;}
    span {width:20px;height:20px;border:1px solid blue;display:block;margin:3px;}
    a { border:2px dotted green;display:inline-block;position:relative; }
</style>
</head>
<body>
<div> 
<a href="#" rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"></span><img src="img.jpg" /> </a>
   <a href="#" rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"></span><img src="img.jpg" /> </a><br style="clear:both" />
<a href="#" rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"></span><img style="float:right;"  src="img.jpg" /> </a>
</div>
</body>
</html>

Answer 3

我遇到了类似的问题并使用<div>代替<span>，就像Pete Uh所建议的那样，并且它有效。

如何将元素放在浮动图像上？

3 个答案: