떠 다니는 이미지의 텍스트

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>을 플로팅하려하고 있는데, 이로 인해 요소가 예상치 못한 위치에 오게됩니다. 이 가정이 틀린 경우 자세한 내용으로 업데이트 할 수 있습니다.