Javascript 将图像放置在不带包装的div底部

如何使用JavaScript将图像放置在div底部而不进行包装？我知道我可以用一个div来包装它并进行绝对定位，但是这会弄脏标记和它的动态内容，所以我不能包装图像，它必须以特定div中的图像为目标

这是基本的标记，需要它找到div的高度，然后将图像放在底部。我想这就是它的工作原理

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

一些文本

您也可以将图像定位到DIV的底部，无需添加第二个包装器。 或者在CSS中执行此操作：

div { position: relative; } 

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

如果需要，也可以在JS中做同样的事情。

就这么简单~~ 应该这样做。

---

如果在第二条规则中不使用padding bottom，则如果div（其文本）的内容不高于图像高度，则图像将溢出（并覆盖文本）。

我肯定会使用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'; 

---

包装器和绝对定位是跨浏览器可靠完成此操作的唯一方法。它并没有真正弄乱标记。我在图像上做绝对位置时遇到了问题，除非我包装它们。这绝对是混乱的标记。除非我有误解。我认为使用Javascript实现CSS中的两条规则有点太过分了。呵呵。。我同意。。但这正是OP的要求。老实说，我不确定是否真的需要投反对票。你是对的，我没有注意到他第一次要求JS。删除邪恶向下投票~ css位的跨浏览器性如何？这是css3，不是吗？它不会转化为旧的ie。我需要它的一致性。但我从未在css中真正使用过>，对这个概念非常陌生。你能详细说明它是什么吗？@Lukasz，你需要支持什么版本的IE？另外，对于CSS选择器的描述，我建议通过谷歌搜索“CSS选择器”或查看它只是一个示例，根据实际代码，您可以删除>并在所有IE版本中使用它。只是它可能会影响应用程序/站点上其他地方的一些其他图像。@Lukasz据我所知。。。唯一不支持“>”（直系后代）选择器的IE版本是版本6。这是十年前的事了。

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

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