将div的宽度设置为父级的父级的宽度

Question

<div class = "x" style="width:100%;">
    <div class = "y" style="width:50%;float:left;">
        <div class = "z" style="width:100%;">
        </div>
    </div>
    <div class = "yy" style="width:50%;float:right;">
        <div class = "zz" style="width:100%;">
        </div>
    </div>
</div>

可以仅通过CSS将“ z” /“ zz”类的div的宽度设置为“ x”类的div的宽度吗？

UPDATE
解决方法是这里的链接 （使用下面给出的答案）

Answer 1

您可以使用inherit属性。 Inherit关键字指定属性应从其父元素继承其值。

HTML：

<div class = "x">
   <div class = "y">
       <div class = "z">
       </div>
   </div>
</div>

CSS：

.x
{
width:100px; 
border:1px solid red;
height:100px;
}

.z{
width:inherit; 
border:1px solid green;
height:100px;
}

这是同样的小提琴 。

Answer 2

唯一的方法是将父x设置为相对位置，将z div设置为绝对位置

.x{
position: relative;
}
.z{
position: absolute ;
top:0;
left:0;
width:100%;
}

Answer 3

给出.x width，然后给出.z width：inherit; 否则，我认为您必须将它们一个接一个地设置，除非要制作盒子模型，将.x设为大盒子，然后将.y和.z放在盒子中。

例如，将.xa宽度设置为100％，然后将.y设置为25px。 您可能要使用{display：-webkit-box;}和{-webkit-box-flex：1;}属性。然后您可以指定x .xa最大宽度数和y 0r z宽度，剩下的一个可以灵活使用取决于您的屏幕有时多大。

但作为html，除非您使用框模型，否则您可能必须分别指定宽度。

希望这对您有所帮助。