CSS - 防止具有未知高度的相对 div 与下面的 div 重叠 [关闭]

Question

<div id="container">
    <div id="div1">
        <img src="https://i.pinimg.com/originals/81/d2/bf/81d2bffd2d12c8275ab2c708b3fd5297.gif" id="image">
    </div>

    <div id="div2">

    </div>
</div>

CSS：

#container{
    width: 500px; 
    height: 500px;
    background-color: aquamarine;
}

#div1{
    display: block;
    position: relative;
    width: 100px;
    margin-bottom: 8px;
    background-color: burlywood;
}

#div2{
    display: block;
    width: 100%;
    height: 100px;
    background-color: red;
}

#image{
    width: 90px; 
    position: absolute;
    margin-right: 10px;
    margin-top: 10px;
}

当我指定div1 的高度时，它会保持在上方，但高度未知，因为我将在其中动态添加一个高度未知的图像。

有没有办法防止高度未知的div1 与div2 重叠并保持在其上方？

我还尝试在它们之间放置<div style="clear: both;"></div>

Answer 1

只需从您的图像中删除position: absolute; - 不需要它，这就是导致重叠的原因，因为由于该位置设置，它可以“离开”其父级，从而将其从文档流中移除，使其依赖于其父位置，但不将其视为父元素“内部”的内容。

Answer 2

我复制了你的样式。我刚刚添加了一个min-height。和image-container。

document.getElementById("show-hide").addEventListener("click", function() {
  img = document.getElementById("image-container");
  img.style.display = img.style.display === "none" ? "block" : "none";
})

#container {
    width: 500px; 
    height: 500px;
    background-color: aquamarine;
}

#div1{
    display: block;
    position: relative;
    width: 100px;
    margin-bottom: 8px;
    background-color: burlywood;
    min-height: 100px; /*add a min-height here*/
}

#div2{
    display: block;
    width: 100%;
    height: 100px;
    background-color: red;
}

#image-container > img{
    width: 90px; 
    position: absolute;
    margin-right: 10px;
    margin-top: 10px;
}

<div id="div1">
  <div id="image-container">
    <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt="nature"></img>
  </div>
</div>

<div id="div2">
  <button id="show-hide">Show hide image</button>
</div>