Получить смещение элемента в контейнере flexbox - PullRequest
1 голос
/ 01 мая 2020

Привет, есть такой столбец:

<div> 
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</div>

Столбец имеет следующие свойства CSS:

{
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between
}

В результате получается столбец section, который хорошо складывается Поверх друг друга и расположитесь на всю высоту контейнера.

Проблема возникает, когда я хочу напечатать этот столбец в PDF, используя mPDF. Эта библиотека не анализирует flexbox, поэтому требуются фактические нижние поля для section. Поскольку количество и содержание разделов является динамическим c, я должен рассчитать это на лету.

Использование jQuery $(el).offset().top или $(el).offsetTop дает мне верхнюю позицию каждой секции. Я добавляю outerHeight(), чтобы получить нижнюю позицию, которую я вычитаю из самой верхней позиции следующего раздела, чтобы получить расстояние между ними - нижнее поле.

Однако ни одна из этих функций ($(el).offset().top или $(el).offsetTop), по-видимому, не дает правильную позицию, принимая во внимание расстояние от flexbox. Вместо этого секции будут располагаться непосредственно друг под другом или с меньшим полем, чем на экране.

Как я могу получить визуализированную позицию элемента внутри контейнера flexbox?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...