如何将图像定位在使用JavaScript的div底部而不包装它？我知道我可以用div来包装它，并做绝对定位，但是这会混淆标记并且它也是动态内容，所以我不能包装图像，它必须将图像定位到特定的div中。在div底部没有包装的位置图像

这里是基本的标记，需要它来找到div的高度，然后将位置图像放在底部。我认为这是如何工作的？

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

来源

2011-09-02 Lukasz

包装和绝对定位是实现可靠跨浏览器的唯一方法。它并不真正混淆标记。 –

我在图像上执行绝对位置时遇到了问题，除非我包装它们。这绝对是泥泞的标记。除非我误解。 – Lukasz

您可以定位的形象，以及一个DIV的底部，你不需要添加第二个包装。要么做在CSS：

div { position: relative; } 

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

或做同样的事情在JS，如果你需要它是JS。

来源

2011-09-02 13:59:29 margusholland

这是css3，虽然不是吗？它不会转化为更老的ie。我需要它是一致的。我从来没有真正使用>在CSS中，但对这个概念非常陌生。你能详细说明它是什么吗？ – Lukasz

@Lukasz，你需要支持哪些版本的IE？此外，对于CSS选择器的说明，我建议使用Google搜索“CSS选择器”或查看http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ –

这只是一个示例，取决于实际的代码，你可以删除>，它会在所有IE版本中工作。只是它也可能会影响应用程序/网站上某个其他图像。 – margusholland

像这样简单~~

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

应该这样做。如果在第二条规则中没有使用填充底部，则如果div（其文本）的内容不高于图像高度，图像将溢出（并覆盖文本）。

来源

2011-09-02 13:59:56

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

来源

2011-09-02 14:03:09 Loktar

使用Javascript的东西，你可以用CSS中的两条规则来实现，我觉得有点太过分了。 – 2011-09-02 14:05:07

heh ..我同意..但那是什么OP要求。不确定投票是否真的需要诚实。 – Loktar

你说得对，我没注意到他第一次问JS。去除邪恶投票〜 – 2011-09-02 14:07:32

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

回答

像这样简单~~

相关问题