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

【问题标题】：CSS width in Percent related to the grand parent与祖父母相关的 CSS 宽度百分比
【发布时间】：2015-09-27 19:49:02
【问题描述】：

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

【问题讨论】：

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

标签： css responsive-design width percentage

【解决方案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%;
}

【讨论】：