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

Question

我总是有这样的疑问。

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

例如i的代码是

<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 (25px)的宽度的50%，使用任何css属性或功能是可能的吗?

我知道，在transform: translate(50%,25%) 50%是相对于自己的宽度元素和25%自己的高度元素，所以它是可能的，任何函数，我可以得到其他元素的宽度或高度?

谢谢!

Answer 1

No。没有JavaScript不行。CSS没有办法将一个元素的属性应用到另一个元素上，除非通过继承。

使用JavaScript，解决方案看起来像这样:

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