gpt4 book ai didi

html - float 图像上的文本

转载 作者:太空宇宙 更新时间:2023-11-04 05:32:06 25 4
gpt4 key购买 nike

我需要在图库中的一系列图像上放置一些文本。我找到了很多关于文本部分的教程,但是图像需要 float 。每当我添加 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>

这样图像就一个接一个,但就像我说的那样,我需要在不破坏其他一切的情况下 float 它们。

最佳答案

你会想要 float 整个外部 <span><a> .我的猜测是您目前正在尝试 float <img>具体来说,这会导致元素最终出现在意想不到的位置。如果此假设不正确,您可能需要更新更多详细信息。

关于html - float 图像上的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2579072/

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