与祖父母相关的 CSS 宽度百分比

Posted 2023-03-06

【中文标题】与祖父母相关的 CSS 宽度百分比

【英文标题】：CSS width in Percent related to the grand parent

【发布时间】：2015-09-27 19:49:02

【问题描述】：

如何将宽度百分比与祖父母相关联？

【问题讨论】：

祖父母会是整个页面的宽度吗？

不，事实并非如此。如果页面已满，我知道如何解决，但不是。它有一个专用的宽度

【参考方案1】：

使用javascript：

var g = document.getElementById('grandparent');
var w = g.clientWidth;
if (w > 400)
    w *= .3;
var c = document.getElementsByClassName('child');
for (var i=0; i < c.length; i++) 
    c[i].style.width = w+'px';

我有a jsfiddle example。

【讨论】：

这不是 JS 的问题，因为我没有使用 JS 标记问题，并且标签和标题说问题是 CSS。顺便谢谢你的回答

【参考方案2】：

您可以简单地将 li 的宽度与父级 ul 关联起来，后者又与祖父级 div 关联：

div
    overflow: hidden;
    width: 100%;

ul
    width: 1000%;

li
    width: 3%;