如何调整子元素的宽度而不调整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;

}

---

<强>更新

  

我想知道是否有任何一种黑客可以让我在不设置父级宽度的情况下进行此操作

如果没有父类具有某种宽度或类似宽度的属性，则无法实现此目的。如果您只反对在父级上使用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%;
}