jQuery - как добавить новые данные в блок, заполненный полями с «position: absolute»

Question

jQuery - как добавить новые данные в блок, заполненный полями с «position: absolute»

0

Пусть имеет следующую структуру HTML:

<div class="items">
  <div class="item" style="position: absolute; left: Apx; top: Bpx;">...</div>
  ...
</div>

Я использую на этой странице также бесконечную разбивку на страницы, поэтому, когда я нажимаю кнопку "Загрузить еще", она называется этим действием JS:

$ ('. items'). append (... новые данные, описанные в разделе ".item" div...);

Данные загружаются, но они отображаются в верхней части .items div => "старые" данные (.item divs) перекрываются новыми. Конечно, я хотел бы отображать новые данные, завернутые снова в .item divs ниже предыдущих (с положением: absolute;), но как это сделать?

спасибо

user984621 03 март 2014, в 17:05

Источник

0

Какова позиция CSS в div 'items'?
Reinder Wit 03 март 2014, в 15:28
2

И почему вы используете абсолютно позиционированный div? они не могут просто показываться друг под другом относительно?
Reinder Wit 03 март 2014, в 15:30
0

Поскольку страница использует Pinterest-подобный макет.
user984621 03 март 2014, в 15:47

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

И почему вы используете абсолютно позиционированный div? они не могут просто показываться друг под другом относительно?
Поскольку страница использует Pinterest-подобный макет.

MickelsonMichael · Answer 1 · 2014-03-03T14-25-00.000Z

Если я правильно понимаю, тогда я бы рекомендовал вам сделать .items div частью, которая абсолютно позиционирована, в то время как вы делаете элементы .item относительно расположенными внутри нее. Это должно помочь им правильно стекать, когда добавляется больше, сохраняя позицию.

Другим вариантом было бы добавить div вокруг этих элементов, чтобы выровнять их.

mayabelle · Answer 2 · 2014-03-03T13-51-00.000Z

Поскольку вы добавляете новые divs динамически, вы можете установить их верхнее смещение динамически, что-то вроде этого:

var topValue = $('.items').position().top + $('.items').outerHeight(true) + 'px';
var newDiv = ... // Populate your new div, setting the "top: Bpx" value to topValue
$('.items').append(newDiv);