html - 如何在不调整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;

}

---

更新

I am wondering if there is any kind of hack that allows me to do it without setting width on parent

如果父级没有某种宽度或类似宽度的属性，则无法完成此操作。如果您只是反对在父级上使用 width 属性，则可以使用多种类似宽度的替代方法。

正如 cimmanon 在下面的评论中所解释的，您可以将 .parent 设置为具有 max-width。它不一定必须是 100%；任何最大宽度都可以，只要它小于 child 的宽度。 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;
} 

但请记住，这些只是众多可能选择中的两个。希望这对您有所帮助!