Текст поверх плавающих изображений

Question

Мне нужно поместить текст поверх серии изображений в галерее. Я нашел много учебников о текстовой части, однако изображения должны быть плавающими. Всякий раз, когда я добавляю 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>

Таким образом, изображения располагаются один под другим, но, как я уже сказал, мне нужно разместить их, не ломая ничего другого.

Answer 1

Вам захочется пропустить все внешние <span> или <a>.Я предполагаю, что в настоящее время вы пытаетесь использовать именно <img>, что приводит к тому, что элементы оказываются в неожиданных позициях.Если это предположение неверно, вы можете обновить с более подробной информацией.