Надпись с "хитрым" вертикальным расстоянием

Question

Существует картина:

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

Как сделать эту надписи так, что:

1. линии были "отделенной" - между линиями был пробел.
2. Текст выравнивается влево.
3. Ширина фотографии не фиксирована, она плавающая.
4. Длина текста также не фиксирована (подписи могут иметь разную длину).

Мне нужно решение, совместимое с кроссбраузером.

---

Заранее прошу прощения за мой английский.

Если у вас есть лучшее название для этой проблемы - я самостоятельно поменю.

Answer 1

Попробуйте следующее: Трюк - это использование таблицы (только один элемент, поддерживающий полный функциональный вертикальный выравнивание: снизу). Для того, чтобы контролировать использование разрыв пары параметров (см .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> 

Единственная проблема - вам необходимо указать среднюю ширину текста (вы требование # 3 выполнено, но для текста он мог быть изменен).

Answer 2

Вы ознакомились с этим уроком Text Blocks Over Image?