浮动图像上的文本
我需要在画廊中的一系列图像上添加一些文本。我找到了很多关于文本部分的教程，但是图像需要浮动。 每当我添加 float:left 时，尽管这个技巧不再起作用。我的代码（为了简洁起见，内联css）：
<a href="/photos/photo1.php" title="photo1">
<span style="position: relative; width: 100%;">
<img src="/photos/photo1.jpg" alt="" />
<span style="position: absolute; top: 10px; left: 0; width: 100%;">Text over image</span>
</span>
</a>
<a href="/photos/photo2.php" title="photo2">
<span style="position: relative; width: 100%;">
<img src="/photos/photo2.jpg" alt="" />
<span style="position: absolute; top: 10px; left: 0; width: 100%;">Text over image</span>
</span>
</a>
这样，图像就在另一个图像之下，但就像我说的，我需要浮动它们而不破坏其他所有内容。
I need to put some text over a series of images in a gallery. I found many tutorials about the text part however the images need to be floated.
Whenever I add float:left though the trick no longer works. My code (css inline for sack of brevity):
<a href="/photos/photo1.php" title="photo1">
<span style="position: relative; width: 100%;">
<img src="/photos/photo1.jpg" alt="" />
<span style="position: absolute; top: 10px; left: 0; width: 100%;">Text over image</span>
</span>
</a>
<a href="/photos/photo2.php" title="photo2">
<span style="position: relative; width: 100%;">
<img src="/photos/photo2.jpg" alt="" />
<span style="position: absolute; top: 10px; left: 0; width: 100%;">Text over image</span>
</span>
</a>
This way the images are one under another but like I said I need to float them without breaking everything else.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要浮动整个外部
或。我的猜测是，您当前正在尝试专门浮动![]()
You will want to float the entire outer
<span>or the<a>. My guess is that you are currently trying to float the<img>specifically, which causes the elements to end up in unexpected positions. If this assumption is incorrect, you might want to update with more details.