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属性或函数，#child的宽度是否可能是#child2（25px）宽度的50％？

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

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

1 个答案: