根据文本对齐背景图像

发布于 2024-11-18 06:49:25 字数 509 浏览 3 评论 0原文

是否可以根据文本结束的位置对齐背景图像？

演示代码：

.textBox .text { padding-top: 8px; background: url('../images/text-top.gif') left top no-repeat; padding-right:15px; }
.textBox .bottom { padding: 0px 0px 20px 15px; background: url('../images/text-bottom.gif') right bottom no-repeat; }

<div class="textBox">
<div class="text">
<div class="bottom">blah blah blah multi-line text here</div>
</div>
</div>

我想要完成的是 ../images/text-bottom.gif 在文本末尾对齐。

原文

Is is possible to align a background image according to where the text ends?

Demo code:

.textBox .text { padding-top: 8px; background: url('../images/text-top.gif') left top no-repeat; padding-right:15px; }
.textBox .bottom { padding: 0px 0px 20px 15px; background: url('../images/text-bottom.gif') right bottom no-repeat; }

<div class="textBox">
<div class="text">
<div class="bottom">blah blah blah multi-line text here</div>
</div>
</div>

What i want to accomplish is the ../images/text-bottom.gif to be aligned at the end of the text.

分享到QQ

分享到微博

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

发布评论

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

葬シ愛 2024-11-25 06:49:25

尝试添加显示：

.textBox .bottom {
     ....
    display: inline;

}

try add display:

.textBox .bottom {
     ....
    display: inline;

}

回复收藏 0 原文

浅沫记忆 2024-11-25 06:49:25

不，简单的内联显示不起作用。
但我找到了一个解决方案

，我将最后一个单词放在 [span] 标签中，将所有文本放在 [p] 标签中，并按如下方式修改我的 css：

.textBox .bottom { padding: 0px 0px 20px 15px; } 
.textBox p { padding-bottom: 21px; font-size: 14px; line-height: 21px; color: #666; position:relative; } 
.textBox .bottom p span{ background: url('../images/text-bottom.gif') top right no-repeat; width:auto; padding-left:5px; padding-right:15px;height:40px; display: inline;

使用正则表达式，我找到文本的最后一个单词，并将其括在 [ span] 它的工作原理就像我想要的那样

no, simple display inline didn;t work.
yet i found a solution

i place the final word in a [span] tag, all text in [p] tag and modify my css as follow:

.textBox .bottom { padding: 0px 0px 20px 15px; } 
.textBox p { padding-bottom: 21px; font-size: 14px; line-height: 21px; color: #666; position:relative; } 
.textBox .bottom p span{ background: url('../images/text-bottom.gif') top right no-repeat; width:auto; padding-left:5px; padding-right:15px;height:40px; display: inline;

Using regular expression, i find the last word of my text, and i enclose it in [span] and it works like i want

回复收藏 0 原文

~没有更多了~