带有“棘手”垂直间距的标题

Question

有一张照片：

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

如何使铭文以便：

1. 这些行是“分开” - 这两行之间是间隙。
2. 文字左对齐。
3. 照片的宽度不固定，浮动。
4. 文本的长度也没有固定（签名可以有不同的长度）。

我需要与浏览器兼容的解决方案。

---

我提前为我的英语道歉。

如果您对此问题有更好的称号 - 我会自行更改。

Answer 1

您是否看过这个Text Blocks Over Image教程？

Answer 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，但对于文本可以更改）。