Динамический контент: Как настроить положение div автоматически? - PullRequest
0 голосов
/ 14 января 2019

Я настраиваю одну html-страницу, в которой содержимое динамически изменяется на основе вызовов API. В зависимости от длины содержимого, почти каждый раз, когда выполняется новый вызов API, весь css больше не работает, и div начинают перекрывают друг друга. Можно ли как-то динамически позиционировать элементы, основываясь на позиции предыдущего элемента?

Структура кода выглядит примерно так:

<body>
<div class="container">
    <div class="div1">
        <p class="content">Dynamic content</p>
    </div>
    <div class="div2">
        <p class="content">I am getting overlapped!</p>
    </div>
</div>
</body>

CSS:

.container {
width: 70%;
padding-top: 40px;
position: relative;
left: 123px;
} 

.div1 {
width: 80%;
top: 180px;
position: absolute;
}

.div2 {
position: absolute;
top: 380px;
width: 70%;
padding-bottom: 100px;
}

Я был бы очень благодарен, если бы кто-то знал решение!

Ответы [ 3 ]

0 голосов
/ 14 января 2019

Судя по вашему описанию, вы не должны использовать position: absolute. Позиционирование элемента по умолчанию - static, которое позиционирует элементы в обычном потоке документов, так что ваш .div2 будет следовать вашему .div1 (даже при изменении длины вашего динамического содержимого). Попробуйте удалить все строки position из вашего CSS, чтобы понять, что я имею в виду.

0 голосов
/ 14 января 2019

вам нужно использовать любую сеточную систему, которая контролирует любые динамические изменения в изменениях на ваших веб-страницах. https://getbootstrap.com/docs/4.2/layout/grid/ Попробуй это. это сделает вашу веб-страницу отзывчивой.

0 голосов
/ 14 января 2019

вы можете добавить top:0; в верхнем примере div добавить top:0; в div1

.div1 {
width: 80%;
position: absolute;
background:black;
top:0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...