Question

我在另一个div #description中有一个div .item，我希望它与div的宽度相同。这就是div：

<div class="item">
    <div id="description">
        <h2>Title</h2>
        <p>Description</p>
    </div>
</div>

因此，#description必须与.item具有相同的宽度。问题是#description没有响应我写的CSS，即使我使用不同的百分比。我猜它会在30%左右水平填充，而不是100%。

.item {
    float: left;
    width: 100%;
    border: 1px solid;
    border-color:  #575757;
    position: relative;
}

#description {
    width: 100%;
    height: 40%;
    bottom: 0px;
    position: absolute;
    background-color: whitesmoke;
    color: #000000;
}

据我所知，内部div应该自动变成与外部相同的宽度而不指定任何宽度属性，对吧？那为什么这不起作用？

Answer 1

当元素绝对定位时，它基本上是removed from the natural document flow。在这种情况下，父元素.item不再具有维度，因为子元素不再在流中。元素.item基本上会自行折叠，因此导致子元素也这样做。为了解决这个问题，您需要删除绝对定位，或者您需要在父元素上设置定义的维度。

以下是在父元素(example)上设置200px高度的示例。这可能在某些情况下有效，但它并不是非常理想，因为它不能使用动态内容。

作为替代方案，您可以删除绝对定位，子元素.description将自动获取父级的尺寸。 (example)这是{em>基本 block级别元素的默认行为，因为某些属性是从其浏览器默认值重置的。

div内的div不会变成全宽

1 个答案: