alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpgКак разместить IMG в правом нижнем углу DIV
Это то, что я хочу сделать. Div с текстом в нем и в правом нижнем углу img. Высота div стабильна при 24px, но длина неизвестна и может быть более одного из этих divs подряд.
Существует несколько способов сделать это. Самый простой:
<div class="outer">
<img src="....">
</div>
с
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
Теперь, вынимает его из нормального потока, что является проблемой является вы хотите другое содержание, чтобы обернуть/поплавка вокруг него. В этом случае вам действительно нужно знать высоту изображения, а затем применять соответствующие трюки в зависимости от того, что у вас есть.
Начинается с Making the absolute, relative.
Если изображение 10 пикселей в высоту, например, вы могли бы попробовать это:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Конечно 14px происходит от 24px - 10px. Я не знаю, удовлетворит ли это то, что вы пытаетесь достичь.
so defenetly thx - о 1-м коде - только снизу: 0 с правильным позиционированием – bresleveloper
Я не могу прокомментировать ответ от Cletus, но мне пришлось добавить «px» в «right: 0; bottom: 0;» так это: right: 0px; bottom: 0px; В моем случае, если я поставил что-то другое из '0' без суффикса' px', это не сработает. – Jxadro
Фоновое изображение - ваше решение.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
Вам может понадобиться настроить Прокладки в DIV, тоже, так что содержимое DIV не перекрывается ваше изображение, если это необходимо.
Если вы хотите плавать текст вокруг изображения, оба этих ответа неверны. Оба текста сделают текст прямо над изображением. Я искал часы и никакого реального ответа не существует. This article более четко объясняет, почему оба ответа не будут работать, если вы пытаетесь обернуть текст.
+1 для изображения краски! –
Вы также можете попробовать «фоновое изображение». – Gumbo
Связано: [Прикрепить изображения на всех четырех углах DIV] (http://stackoverflow.com/questions/17306087/attach-images-on-all-four-corner-of-div) & [Умный способ добавить угловое изображение на границу DIV на всех четырех углах] (http://stackoverflow.com/questions/6467063/smart-way-to-add-corner-image-to-div-border-on-all-four-corners). –