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？

score 2 · Accepted Answer

如果父级有一个设定的宽度，那么即使子级的宽度超过父级的宽度，它也不会随着子级的宽度而扩展。请参阅此 JS Fiddle 示例。

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

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

}

在此处输入图像描述

更新

我想知道是否有任何一种黑客可以让我在不设置父母宽度的情况下做到这一点

如果父级没有某种宽度或类似宽度的属性，就无法实现这一点。如果您只反对width在父级上使用该属性，则可以使用几种类似宽度的替代方案。

正如 cimanon 在下面的评论中解释的那样，您可以设置.parent一个max-width. 它不一定是100%；任何 max-width 都可以，只要它小于孩子的宽度。请参阅此 JS Fiddle 示例，或查看以下代码：

.parent {
    max-width: 200px;
} 

.child {
   width: 400px;
}

或者，您可以使用position:absolute和设置leftandright属性。请参阅此 JS Fiddle 示例，或查看以下代码：

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

但请记住，这些只是众多可能替代方案中的两个。希望这可以帮助！

score 0 · Accepted Answer

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

.parent {
    max-width: 100%;
}

.child {
    width: 400%;
}

2 回答 2