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和HTML的其余部分，我会假设你发布的内容就是你的HTML和CSS中所有内容。

在那种情况下：

parent-div肯定会与页面一样宽，即100％。
子元素也将与页面一样宽，即100％，并且位于parent-div
兄弟姐妹的宽度为250像素，位于子元素

如果不是这种情况，那么您还有其他HTML或CSS干扰。

Answer 2

这实际上是一个css技巧。它是这样的：

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

有关详细说明，请参阅：Absolute Positioning Inside Relative Positioning。

由于

Answer 3

此屏幕截图说明了如何使用CSS衡量指标。请原谅法国人，这是我的电脑。

padding, margin and border http://img524.imageshack.us/img524/5211/capturedcran20100204173.png

“marge”表示margin，“bordure”表示border，“espace”表示padding。 Margin位于border附近，padding依次落在<textarea>附近，<textarea>依次落在实际元素大小周围。在这个例子中（通过检查堆栈溢出答案width标签）显示没有边距，边界是1px宽，并且height的边界之间有3px填充它的内容;并且内容可以使用的大小（不包括填充）是660x200。此大小与CSS Padding和<div>属性匹配。

从嵌套元素中，您只能占用实际的元素大小。父级上的margin将导致嵌套项保持边距。这意味着嵌套边框与其父边框之间可能仍有空格。

如果您希望嵌套0px占用所有空间，则必须将其padding属性设置为0px，并将其父级的{{1}}属性设置为{{1}}也是如此。

Answer 4

正如zneak指出的那样，不要忘记重置css框模型;见this great article on understanding the box model。

#parent div {
    padding: 0;
    margin: 0;
}

要指出，不要忘记设置

#child-element {
    display: block;
}

因为您可能已将其设置为内嵌，因此它不会扩展到父级宽度的100％。

我无法复制你的问题，一切正常。

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

4 个答案: