Заголовок с «хитрым» вертикальным интервалом

Question

есть картинка:

альтернативный текст http://img522.imageshack.us/img522/3892/64462657.jpg

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

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

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

---

Заранее извиняюсь за мой английский.

Если у вас есть более подходящее название для этого выпуска, я изменю его самостоятельно.

Answer 1

Попробуйте это: Хитрость - это использование таблицы (только один элемент, который поддерживает полный функционал vertical-align: bottom). Для управления пропуском используйте пары параметров (см. .Text font-size / line-height)

<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

Вы ознакомились с этим Учебником текстовых блоков над изображением ?