выравнивание изображения справа - нижний угол текста - PullRequest
1 голос
/ 28 мая 2011

Как я могу выровнять плавающее изображение в правом нижнем углу моего текста?У меня есть div, который имеет цвет фона и содержит текст.Я хочу видеть изображение в этом теге div, в правом нижнем углу.Любое решение CSS ??

<div id="myText"> 
A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here 
<img id ="info_ico" src="images/key_ico.png" />

<div>
#myText
{
        background:#fdf6cc;
    min-height: 90px;
    margin-left:1px;
    width: 913 px;
    padding-left: 30px;
}

#info_ico
{
     float:right; 
     clear:right;
}

Что теперь изменить, чтобы увидеть изображение внизу текста?

Ответы [ 4 ]

3 голосов
/ 28 мая 2011

Если длина содержимого не изменится, вы всегда можете поместить изображение непосредственно перед концом текста, оставив его плавным, как вы делаете, и последний бит текста будет течь вниз по левой стороне .

Пример здесь: http://jsfiddle.net/pBDaJ/

2 голосов
/ 28 мая 2011

CSS, к сожалению, не предоставляет способа сделать это.

Единственное, что вы можете сделать, это экспериментально изменить место вставки img в текст, пока он не окажется там, где вы этого хотите.быть: http://jsfiddle.net/KQFBb/1/

Это, очевидно, не жизнеспособно, если содержимое является динамическим, или размеры контейнера могут измениться.

В этом случае единственный оставшийся вариант - использовать JavaScript.

0 голосов
/ 29 мая 2014

Вы можете использовать псевдоэлемент :: before для добавления определенного количества высоты над плавающим изображением.Просто поместите псевдоэлемент вправо и задайте ему некоторую высоту;затем смести изображение вправо, очистив псевдоэлемент.

.wrapper::before {
    content: '';
    float: right;
    height: 300px; /* Height of the container minus the height of the image */
}
.wrapper img {
    float: right;
    clear: right;
}

Если вы не знаете высоту содержимого, необходим некоторый легкий JavaScript.См. http://jsfiddle.net/3jvJh/ для рабочего примера.

0 голосов
/ 28 мая 2011

Используя фон, вы сможете это сделать.

Добавьте к вашему стилю myText div:

background: url('images/key_ico.png') no-repeat;
background-position: 100% 100%;

Это поместит картинку в нижний правый угол div.Надеюсь, это поможет: -)

...