Html 使子对象与父对象的父对象一样宽

我有两个嵌套的

div

。最外层嵌套在

节中

是否有可能使最里面的

div

与

部分一样宽

以下是我的片段：


正文{
保证金：0自动；
填充：0；
背景颜色：蓝色；
}
#内容{
背景颜色：橙色；
填充：20px；
宽度：300px；
高度：100px；
保证金：0自动；
}
#内在的{
背景颜色：粉红色；
}


测试


内部的

< /代码> 你必须在中间宽度相同，或者使用固定宽度/填充和负边距。

请参阅下面的演示（使用负边距）


正文{
保证金：0自动；
填充：0；
背景颜色：蓝色；
}
#内容{
背景颜色：橙色；
填充：20px；
宽度：300px；
高度：100px；
保证金：0自动；
}
#内在的{
背景颜色：粉红色；
利润率：0-20px；
填充：0 20px；
}


测试


内部的

您可以执行以下操作：

body {
    margin: 0 auto;
    padding: 0;
    background-color: blue;
}


#content {
    background-color: orange;
    padding: 20px;
    width: 300px;
    height: 100px;
    margin: 0 auto;
}
#content > div {
    width: inherit;
}


#inner {
  width: inherit;
  background-color: pink;
}

是的，将“中间分割”和“内部分割”的宽度设置为100%mmmm。。。定位元素可以有任何大小和位置。我刚刚注意到它使用了固定的填充。添加了一个带有演示的解决方案。