html - 相对于元素宽度或高度的单位

Question

我一直有这个疑问。

例如，当我们使用 width: 50% 时，这个 50% 是相对于其父级的宽度。

例如我有这段代码

<div id="root">
    <div id="child">

    </div>

    <div id="child2">

    </div>
</div>

和这个CSS

#root{
    width: 200px;
    height: 100px;
    background-color: red;
}

#child{
    width: 50%;
    height: 20px;
    background: yellow;
}

#child2{
    width: 50px;
    height: 20px;
    background: green;
}

http://jsfiddle.net/3EKzj/

如果 #root 的宽度为 200px，则 #child 的宽度为 100px...

但是 #child 的宽度是否有可能是 #child2 宽度的 50% (25px)，使用任何 css 属性或函数？

我知道在 transform: translate(50%,25%) 中，50% 是相对于自己的宽度元素，25% 是相对于自己的高度元素，所以我可以使用任何函数获取其他元素的宽度或高度？

谢谢!

Answer 1

没有。不是没有 JavaScript。除了通过继承，CSS 无法将一个元素的属性应用到另一个元素。

更新
使用 JavaScript，解决方案如下所示:

var child = document.getElementById('child');
var child2 = document.getElementById('child2');

child.style.width = (child2.clientWidth  / 2) + 'px';