Question

我正在建立一个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;
}

如果有人知道解决方案，我将非常感谢！

Answer 1

根据您的描述，听起来您不应该使用position: absolute。默认元素定位为static，它将在常规文档流中定位元素，以便.div2将跟随.div1（即使动态内容的长度发生变化）。尝试从CSS中删除所有position行，以了解我的意思。

Answer 2

您可以在上面的div示例中添加top:0;，在div1中添加top:0;

.div1 {
width: 80%;
position: absolute;
background:black;
top:0;
}

Answer 3

您需要使用任何网格系统来控制网页更改中的任何动态更改。 https://getbootstrap.com/docs/4.2/layout/grid/ 尝试这个。这将使您的网页具有响应能力。

动态内容：如何自动调整div的位置？

3 个答案: