html - CSS - Div 不会计算子 div

Question

我目前有一部分 HTML 看起来有点像这样。这是一个简化版本。

<div id="content">
   <div id="screenshot">
      <img src="res/screenshot.png" />
   </div>
   <div id="introduction">
      <p>This is just some text</p>
   </div>
</div>

我的 CSS 看起来像这样。

#content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: blue;
}

#screenshot img {
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
}

#introduction {
    position: relative;
    top: -100%;
    left: 200px;
    width: 500px;
    height: 100%;
}

我的问题是“背景:蓝色；”仅选择图像，但不环绕文本。顺便说一句，我知道如何将文本背景设为蓝色，但我需要通过 #content 来完成。如果有帮助，#content 的父元素就是 CSS 中的 this。 基本上，我需要的是，如果我对 #content 做一些事情，它会影响两个子 div。目前它只影响#screenshots。 :/

#content-wrapper{
    position: absolute;
    width: 100%;
    height: 340px;
    left: 0;
    top: 50%;
    margin-top: -170px;
}

谢谢你了

编辑:我需要的是，如果我对 #content 做某事，它会影响两个子 div。目前它只影响#screenshots。 :/

Answer 1

尝试为 #content 指定宽度。

当一个元素被绝对定位时，它的宽度不再默认为 100%。