浮动图像上的文本

时间:2010-04-05 15:05:00

标签: html text css-float relative

我需要在图库中的一系列图像上放置一些文字。我找到了很多关于文本部分的教程,但是图像需要浮动。 每当我添加浮动:左边虽然技巧不再有效。我的代码(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>

这样的图像是一个在另一个之下,但就像我说的那样我需要漂浮它们而不会破坏其他所有东西。

1 个答案:

答案 0 :(得分:2)

您需要浮动整个外部<span><a>。我的猜测是你正在尝试专门浮动<img>,这导致元素最终处于意外位置。如果此假设不正确,您可能希望更新更多详细信息。