Как расположить div динамически ниже другого?

Я пытаюсь использовать jQuery для определения положения div (#olddiv), поэтому я могу использовать эту позицию, чтобы разместить ниже div (#newdiv). Правые границы двух разделов выравниваются (правая граница).

Я пытаюсь получить нижние и правые позиции #olddiv, чтобы использовать их как верхнюю и правую границы #newdiv. Я использовал этот код, но он не работает. Любая идея, что я делаю неправильно?

var right = $('#olddiv').position().right;
var top = $('#olddiv').position().bottom;
$('#newdiv').css('top', right);
$('#newdiv').css('right', top);

Кроме того, я не уверен, что position - это то, что мне нужно. Я думаю, что это можно сделать с помощью position или offset, но я не уверен:

$('#ID').position().left
$('#ID').offset().left

Спасибо

Ответы

Ответ 1

Я использовал функцию offset() для динамического позиционирования элементов. Попробуйте следующее:

var offset = $('#olddiv').offset();
var height = $('#olddiv').height();
var width = $('#olddiv').width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";

$('#ID').css( {
    'position': 'absolute',
    'right': right,
    'top': top
});

также не забудьте связать это с событием window.onresize, если вам нужно его масштабировать, когда пользователь изменяет размер окна.

ОБНОВЛЕНИЕ: другая мысль - нужно ли это позиционировать абсолютно? Почему бы просто не вставить div после другого в DOM?

$('#olddiv').after($('#ID').html());

то просто убедитесь, что они имеют одинаковую ширину.

Ответ 2

Существует довольно крутой плагин, разработанный командой jQuery UI, которая помогает с position.

Позволяет сделать что-то вроде этого:

$(".menu").position({ my: "left top", at: "left bottom", of: ".menubutton" });

Ответ 3

Я использовал это на веб-сайте, который я сделал, для отображения div в определенной позиции, всегда относительно другого div и всегда относительно размеров окна браузера (даже когда вы растягиваете его вручную).

Здесь код:

// function to place the div
var newdiv = function () {
   var o = $('#olddiv').offset();
   var h = $('#olddiv').height();
   var w = $('#olddiv').width();
   $('#newdiv').css({'top': o.top,
                     'left': o.left,
                     'width': w,
                     'height': h       
   }).show();
}

// listen the window changes and correct the newdiv position
$(window).resize(function(){ newdiv(); });

// display the newdiv after DOM is loaded, or whenever you want
newdiv();

Обратите внимание, что вам может понадобиться добавить еще один vars в css выше, например margin, padding и т.д., чтобы получить правильную позицию или даже добавить значения вручную вверх и влево, если новый div не точно так же, как старый.

Ответ 4

Похоже на опечатку, исправление:

'top', right
'right', top

помощь вообще?

Для того, чтобы этот код также работал, div нужно позиционировать абсолютно или относительно.