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>

类＆＃34; z＆＃34; /＆＃34; zz＆＃34;的div的宽度是否可以被设置为类的div＆＃34; x＆＃34;通过css单独？

更新
解决方案在这里link（使用下面给出的答案）

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;
}

这是一个Fiddle。

Answer 2

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

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

Answer 3

给.x宽度，然后给.z宽度：继承; 除此以外，我认为你必须逐个设置它们，除非你打算制作盒子模型，让.x成为大盒子，然后把.y和.z放在盒子里。

给.x宽度例如是100％，然后给.y作为25px。您可以使用{display：-webkit-box;}和{-webkit-box-flex：1;}属性。然后您可以给出x .xa最大宽度数和y 0r z宽度，左边的那个将灵活取决于你的屏幕有多大。

但是作为你的html，你可能需要单独给出宽度，除非你使用盒子模型。

希望这对你有所帮助。

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

3 个答案: