는 "까다로운"수직 간격 캡션이

Question

사진이있다 :

1. 선이 있었다 "이 분리"

   alt text http://img522.imageshack.us/img522/3892/64462657.jpg

   이 비문 그래서 만들려면 - 그 사이에 틈이 있었다.

2. 텍스트가 왼쪽으로 정렬되었습니다.
3. 사진의 너비가 고정되지 않았으며, 떠있었습니다.
4. 텍스트의 길이도 고정되지 않습니다 (서명은 다른 길이 일 수 있음).

크로스 브라우저 호환 솔루션이 필요합니다.

---

영어로 미리 사과드립니다.

이 문제에 대한 더 나은 제목이있는 경우 직접 변경하겠습니다.

Answer 1

시험해보기 : 트릭은 표를 사용합니다 (전체 기능 수직 정렬 : 하단을 지원하는 하나의 요소 만 사용). 당신이 (당신의 요구 사항 # 3, 만족 텍스트의 평균 너비를 지정할 필요하지만, 텍스트 것은 수 - 매개 변수의 갭 사용 쌍 (는 .text 글꼴 크기/라인 높이 참조)

<style> 
.frm{ 
    height:80px; 
    vertical-align:bottom; 
} 
.text{ 
    margin-bottom:3px; 
    background-color:#7f0000; 
    color:white; 
    font-size:15px; 
    line-height:20px; 
} 
.banner{ 
    position:relative; 
    left:0px; 
    top:-80px; 
    width:200px; 
} 
</style> 
<div style="float:left;"> 
     <img src="64462657.jpg" /> 
<table class="banner" > 
<tr> 
    <td class="frm"> 
     <span class="text">OVERRIDE some long-long text there </span> 
    </td> 
</tr> 
</table> 

</div> 

유일한 문제는 제어하려면 변경 될 수 있음).

Answer 2

이 Text Blocks Over Image 자습서를 보셨습니까?