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

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

类“z”/“zz”的div的宽度是否可以通过css单独设置为类“x”的div的宽度？将div的宽度设置为父级父宽度

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

来源

2016-01-05 iajnr

这样做将是父X设置到的相对位置，而z div来的绝对位置

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

来源

2016-01-05 03:47:44 javiercf

它的工作，辉煌！ – iajnr

可以使用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。

来源

2016-01-05 03:28:32

如果y的宽度也设置，那么这不起作用 - https://jsfiddle.net/1L53mq5L/ – iajnr

是的，inherit关键字限制了子元素的属性从父元素的继承。你之前的问题中没有提到'y'可能有宽度。这就是为什么我提供这个解决方案。 –

给.X宽度，然后给.Z宽度的唯一方法：继承; 否则，我认为你必须逐一设置它们，除非你打算制作盒子模型，让.x做成大盒子，然后把.y和.z放在盒子里。

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

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

希望这可以帮助你一点点。

来源

2016-01-05 03:54:35

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

回答

相关问题