расположите изображение внизу div без оболочки

Question

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

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

<div id="content">
 <p>some text</p>
 <img src="img.jpg"/>
</div>

Answer 1

Вы также можете разместить изображение в нижней части DIV, вам не нужно добавлять вторую обертку. Либо сделайте это в CSS:

div { position: relative; } 

div > img { position: absolute; bottom: 0; }

или сделайте то же самое в JS, если вам это нужно, в JS.

Answer 2

Так просто, как это ~~

#content
{ position:relative; padding-bottom:50px; } // if image height is 50px;
#content > img
{ position:absolute; bottom:0; }

Это должно сделать это.Если вы не используете padding-bottom во втором правиле, изображение будет переполнено (и будет охватывать текст), если содержимое div (его текст) не выше высоты изображения.

Answer 3

Я бы сделал это с помощью CSS, и не рекомендую делать это таким образом ... но вы можете сделать это с помощью JS, например,

Демонстрация в реальном времени

var image = document.getElementById("image"),
    contentDiv = document.getElementById("content");

image.style.position = 'absolute';
image.style.top = contentDiv.offsetTop + contentDiv.offsetHeight - image.offsetHeight + 'px';