Подпись с “хитрым” пространством по вертикали
Существует изображение:
сопроводительный текст http://img522.imageshack.us/img522/3892/64462657.jpg
Как сделать эту надпись так, чтобы:
- Строки были "разделены" - который является между строками, был разрыв.
- Текст выравнивается по левому краю.
- Ширина фотографии не фиксируется, она плавает.
- Длина текста также не зафиксировала (подписи могут иметь различные длины).
Мне нужно crossbrowser-совместимое решение.
Я приношу извинения заранее за свой английский язык.
Если у Вас будет лучший заголовок для этой проблемы то - я изменюсь самостоятельно.
2 ответа
Попробуйте следующее: Уловка - это использование таблицы (всего один элемент, который поддерживает полный функционал 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 выполняется, но для текста его можно изменить).
Вы ознакомились с этим учебным пособием Текстовые блоки поверх изображения ?