css - 当 div 不随内容调整大小时？

Question

我正在做一些复杂的设计，又遇到了一个愚蠢的问题:)

好吧，假设我有一个 div 和一些内容，比如:

<div style="background-color: #fff; width: 1000px; margin: 0 auto;">
     <img src="img.png" />
     <p>Blablabla :)</p>
</div>
<div style="background-color: #000; width: 1000px; margin: 0 auto;"></div>

div的宽度是固定的，但是我没有告诉浏览器高度是多少(所以css文件中没有div的height属性)。

然后，当我在第一段或更大的图像中添加越来越多的文本时，第一个 div 的文本子元素位于第二个 div 中。

如何防止这种情况发生？或者我做了什么让它发生？

谢谢!

Answer 1

确保父 div 在 CSS 中不是 position:absolute; 或 position:fixed;。它们应该是 position:relative;。

如果任何子项是 float:left; 或 float:right; 则反射父 div 需要一个 overflow:auto; 属性为了使 div 完全包裹子项。

如果您发布了一个完整的工作页面示例，而不仅仅是 div 和 CSS，这将有助于我们为您提供更多帮助。