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

但是使用任何css属性或函数，宽度是否可能是（25px）#child宽度的50％ ？#child2

我知道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';