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

标签 html css html5 css3

我一直有这个疑问。

例如,当使用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宽度(25像素)的50%?

我知道在transform: translate(50%,25%)中50%是相对于自己的宽度元素,而25%是相对于自己的height元素,所以我可以通过任何函数来获得其他元素的宽度或高度吗?

谢谢!

最佳答案

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

更新资料
使用JavaScript,解决方案如下所示:

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

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

关于html - 相对于元素的宽度或高度的单位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17070073/

相关文章:

html - 使用 css 定位最深嵌套的 ul/ol 元素

html - CSS:如何使用自己的 CSS 将 Twitter Bootstrap 添加到现有网页?

html - 打印页面在第二页上没有正确中断

没有子级的列表项的 CSS 或 JS 来自有子级的同级列表项

php - 用PHP缩进HTML(5)时出现问题

html - 如何在标题中定位 div?

css - Flex div 中的 SVG 图像在 Safari 和 Chrome 中的显示方式不同

php - div样式高度不起作用

javascript - 用户选择日期时如何显示?

javascript - bxslider 在页面加载之前堆叠