如何调整子元素的宽度而不调整CSS中父元素的宽度？

Question

我有以下几点：

<div class="parent"> 
    <div class="sizer" /> 
    <div class="child" /> 
</div> 

.sizer { 
width: 200px; 
} 

.child { 
position: relative; 
width: 400px; 
} 

不准我明确设置宽度的父母，和我不允许孩子设置为position:absolute。

使用CSS，有没有其他方法可以将宽度.child设置为400，而不会将宽度为.parent的宽度从200扩展到400？

Answer 1

如果父级具有设置的宽度，那么即使孩子的宽度超过父级的宽度，它也不会扩展为子级的宽度。请参阅this JS Fiddle example。

.parent { 
    width: 300px; 
    height: 50px; 
} 

.child { 
    width: 400px; 
    height: 50px; 
    position: relative; 

} 

---

UPDATE

我想知道是否有任何形式的黑客攻击，让我这样做不会对家长设置宽度

有n没有父母具有某种类型的宽度或宽度属性的方式来实现这一点。如果您只是反对在父级上使用width属性，则可以使用几个宽度类似的替代方法。

正如cimmanon在下面的评论中解释的，您可以将.parent设置为max-width。它不一定是100%;只要小于孩子的宽度，任何最大宽度都可以。 See this JS Fiddle example，或者看看这个代码：

.parent { 
    max-width: 200px; 
} 

.child { 
    width: 400px; 
} 

或者，你可以使用position:absolute并设置left和right性能。 See this JS Fiddle example，或者看看这个代码：

.parent { 
    position:absolute; 
    left:0; 
    right:0; 
} 

但要记住，这些都是只有两个许多可能的替代品。希望这可以帮助！

Answer 2

您可以将父级的最大宽度设置为100％。

http://jsfiddle.net/aFdzy/

.parent { 
    max-width: 100%; 
} 

.child { 
    width: 400%; 
}