我創建了一個插件來對齊一個元素。在這我這樣做最簡單的形式:如何使用jQuery計算元素跨瀏覽器的高度?
- outerElement(DIV)
- 當前元素的獲取高度獲取高度
- 結果= outerHeight - 當前元素的高度
- SETT CSS屬性 '頂'=結果。
它可以在Firefox和IE8中使用,但不適用於Opera或Google Chrome。
我猜它與邊界,填充和邊距有關。那麼爲了使它跨瀏覽器工作,我需要做些什麼?
UPDATE
代碼已被修改,現在正在工作。
(function($){
$.fn.alignBottom = function()
{
var defaults = {
outerHight: 0,
elementHeight: 0
};
var options = $.extend(defaults, options);
var bpHeight = 0; // Border + padding
return this.each(function()
{
options.outerHight = $(this).parent().outerHeight();
bpHeight = options.outerHight - $(this).parent().height();
options.elementHeight = $(this).outerHeight(true) + bpHeight;
$(this).css({'position':'relative','top':options.outerHight-(options.elementHeight)+'px'});
});
};
})(jQuery);
的HTML可能看起來是這樣的:
div class="myOuterDiv">
<div class="floatLeft"> Variable content here </div>
<img class="bottomAlign floatRight" src="" /> </div>
</div>
和運用我的jQuery插件:
jQuery(".bottomAlign").alignBottom();
Steven,有沒有什麼理由你不使用'position:absolute;底部:0'? – 2010-01-11 17:00:39
因爲當父元素的大小可變時它不起作用。 – Steven 2010-01-11 17:52:57