выровнять изображение на основе текста - PullRequest
Новая
       31

выровнять изображение на основе текста

0 голосов
/ 30 июня 2011

Можно ли выровнять фоновое изображение в зависимости от того, где заканчивается текст?

Демо-код: 

.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, чтобы выровнять его в конце текста.

Ответы [ 2 ]

1 голос
/ 30 июня 2011

попробуйте добавить дисплей: 

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

}
0 голосов
/ 04 июля 2011

нет, простой встроенный дисплей не работает.все же я нашел решение

я помещаю последнее слово в тег [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], и оно работает так, как я хочу

...