html - 使内部元素比父元素宽一定数量

Question

我在另一个元素中有一个元素，我希望该内部元素比父元素宽一定数量 - 比方说 40 像素。所以如果父级是 500px 宽，它看起来像这样:

但是，如果父项的宽度为 600px，例如，我希望子项的宽度为 640px。

在不将外部元素绑定(bind)到任何特定宽度的情况下，我希望内部元素始终比外部元素宽 40 像素。是否只有一种 CSS 方法可以实现这一目标？

Answer 1

您可以为此使用 calc。

对于内部div，只需提供以下详细信息

.inner {
    width: calc(100% + 40px);
}