Как расположить отделение динамично ниже другого?
Я всегда поражаюсь, что больше людей не знает [приблизительно 110] NDepend - он показывает все зависимости на каждом уровне Вашего кода и даже потянет симпатичное поле и изображения стрелки, показывающие, насколько запутанный Ваша архитектура действительно:) Вместе с TestDriven. Сеть, я не могу предположить работать без него больше. Свободный/дешевый.
4 ответа
Я использовал смещение ( ) для динамического позиционирования элементов. Попробуйте следующее:
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());
а затем просто убедиться, что они имеют одинаковую ширину.
Команда jQuery UI разрабатывает довольно крутой плагин , который помогает с позицией .
Позволяет сделать что-то вроде этого:
$(".menu").position({ my: "left top", at: "left bottom", of: ".menubutton" });
Похоже на опечатку, исправление:
'top', right
'right', top
вообще помогает?
Чтобы этот код также работал, блоки div должны быть расположены абсолютно или относительно друг друга.
Я использовал это на своем веб-сайте, чтобы отобразить div в определенном position, всегда относительно другого 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, например поля, отступы и т. Д., Чтобы получить правильную позицию, или даже вручную добавить значения сверху и слева,