如何使用CSS获取父母在HTML中的父级宽度？

Question

我的HTML代码是：

<div id="wrapper" style="width:100%;">
    <div style="width:960px;">
       <div style="width:30%;">
            <div>Hello World!</div>
       </div>
    </div>
</div>

如何设置＆＃34; Hello World的宽度！＆＃34; div与＃34;包装＆＃34;相同div与css？

Answer 1

要给出相对于其祖先之一的宽度，一种解决方案是给祖先position:relative和元素本身position:absolute。

/* make the three divs visible, to demonstrate the effect */

div {background-color: rgba(128,128,128,.3)}

/* the main point to the solution */

#wrapper {position:relative}
#wrapper > div > div {position:absolute}

/* some cleaning up of the side effects */

#wrapper > div::after {content:'\200B'}

<div id="wrapper" style="width:100%;">
    <div style="width:960px;">
       <div style="width:30%;">
            <div>Hello World!</div>
       </div>
    </div>
</div>

正如您在整页显示片段时所看到的那样，最里面的div（背景颜色最深）是最外层的宽度的30％，即使中间有一个固定的宽度div。

除非你有别的意思，否则我会道歉，但你应该更好地解释自己。