Как разместить img в правом нижнем углу div

Ответ 1

Есть несколько способов сделать это. Самый простой:

<div class="outer">
<img src="....">
</div>

с

div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }

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

Начните с Создание абсолютного, относительного.

Если изображение имеет высоту 10 пикселей, например, вы можете попробовать следующее:

div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }

Конечно, 14px происходит от 24px - 10px. Я не знаю, удовлетворит ли это то, что вы пытаетесь достичь.

Ответ 2

Фоновое изображение - ваше решение.

<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>

Вам может потребоваться настроить прокладки div, так что содержимое div не будет перекрывать ваше изображение, если это необходимо.

Ответ 3

Если вы хотите плавать текст вокруг изображения, оба этих ответа неверны. Оба текста сделают текст прямо над изображением. Я искал часы и никакого реального ответа не существует. В этой статье более четко объясняется, почему оба ответа не будут работать, если вы пытаетесь обернуть текст.