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

Question

Я пытаюсь использовать 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

Спасибо

Answer 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());

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

Answer 2

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

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

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

Answer 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();

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

Answer 4

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

'top', right
'right', top

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

Для правильной работы этого кода элементы div должны быть расположены абсолютно или относительно.