当前位置：文江博客话题详情

标题带有“棘手”字样。垂直间距

发布于 2024-09-01 19:12:05 字数 429 浏览 7 评论 0原文

有一张图片：

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

如何制作此铭文，以便：

线条“分隔” - 即线条之间有间隙。
文本左对齐。
照片的宽度不是固定的，它是浮动的。
文本的长度也不固定（签名可以有不同的长度）。

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

我提前为我的英语道歉。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感性不性感 2024-09-08 19:12:05

试试这个：
诀窍 - 是表格的使用（只有一个元素，支持完整功能的垂直对齐：底部）。要控制间隙，请使用成对的参数（请参阅.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已满足，但对于文本，它可以更改）。

Try this:
The trick - is usage of table (only one element, which support full functional vertical-align: bottom). To control gap use pairs of parameters (see .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>

The only problem - you need specify average width of text (you requirement #3 is satisfied, but for text it could be changed).

回复收藏 0 原文