CSS:Width如何以百分比形式工作？

Question

我有我认为是一个奇怪的问题.我有一个div,在父div中,我给了孩子div宽度为100%,但它没有增长到父div的大小.

父DIV并没有任何类型的集合宽度.所以我的问题是:宽度百分比仅在父元素具有设置宽度时才起作用,或者它是否应该增长？

澄清:

如果父div没有设置宽度,有些人可能想知道父div的宽度是如何增长的.原因是我在父div中有其他兄弟元素,并且设置了它们的宽度,所以父div已经增长到满足那些兄弟宽度.

代码示例:

<div id="parent-div">
    <div id="child-element" style="width: 100%">Content</div>
    <div id="sibling" style="width: 250px"></div>
</div>

子元素不会增长以满足父div.宽度100%基本上没有做任何我能说的事情.这是在IE7中.

谢谢.

后续行动:感谢大家的回答.我正忙着测试我的结局.我原本认为父母div只会像他们的孩子一样宽大,但事实证明我错了,因为我上面的例子,我编码只是为了证明我的问题.就我而言,我的父母div有一个position: fixed和bottom: 1px和right: 1px适用于它.从我的测试来看,这似乎改变了父div的行为.它不再自动延伸到页面的整个宽度,而是假设我认为的行为无论如何,这是父div扩展到足以容纳其最宽的孩子.这就是我现在看到的行为,但这只是因为我的父div有一个固定的位置.

Answer 1

这实际上是一个CSS技巧。事情是这样的：

如果将父 div 位置设置为相对，子 div 位置设置为绝对，则子 div 将保留在父 div 内，即使它们的位置是绝对的。

有关更多说明，请参阅：相对定位内的绝对定位。

谢谢