在没有包装的div底部定位图像

Question

如何使用JavaScript将图像放置在div的底部而不包装它？我知道我可以用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中做同样的事情。

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这样做

<强> Live Demo

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

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