如何將圖像定位在使用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底部沒有包裝的位置圖像

回答

像這樣簡單~~

相關問題