css 相对于 parent 的 parent 大小

Question

我问这个是因为我看到了与我的非常相似的问题。有

<div id="grand">
    <ul id="parent">
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
        <li class="child">Content</li>
    </ul>
</div>

能否将 child 的 css 宽度设置为 grand 的相对宽度（单位为 %）， 完全忽略 的值 parent的宽度。例如：

#child{ width: 25% of grand's width }

添加了一些解释：

考虑一下：

parent 有 6 个 child，我们只想显示 4 个主题，这样它们应该有 grand 宽度的 25%。

#grand{
    width: 900px;
    overflow: hidden
}
#parent{
    width: 9999px;
}
.child{
    width: 900px;
    width: 25% of grand's width
}

Answer 1

其实可以，但是需要祖父母position:relative和孙子的绝对定位

我怀疑这是一个边缘案例，但这是可能的。

#grand {
  padding: 5%;
  width: 80%;
  border: 1px solid red;
  position: relative;
}
#parent {
  height: 150px;
  width: 60%;
  background: red;
  margin: auto;
}
#child {
  height: 100px;
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  background: blue;
  color: white;
}

<div id="grand">Grand
  <div id="parent">Parent
    <div id="child">Child</div>
  </div>
</div>

Answer 2

您可以使用 em 单位。这不需要 JavaScript 或绝对定位。

一旦您想显示一些文本内容，请将字体大小重新设置为内容 span/div。

http://jsbin.com/xibocodaba/edit?html,css,output

div
{
  height:100%;
}

#grand
{
  font-size:300px;
  border:1px solid blue;
  width:1em;
  height:30px;
}

#parent
{
  border:1px solid red;
  width:.1em;
}

#child
{
  border:2px solid gold;
  width:.25em;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div id="grand">
    <div id="parent">
        <div id="child">
          
        </div>
    </div>
</div>
</body>
</html>

Answer 3

您也可以使用 % 来调整父级的大小 ;)，这样就更容易决定 much/many 子级的显示方式。

#grand {
  width: 900px;/*update this to whatever : 100% to any other value/units */
  overflow: hidden
}
#parent {
  width: 1000%;
}
.child {
  float: left;
  box-shadow: inset 0 0 0 1px;
  width: 2.5%;/* wich is here 25% of grand's width */
}
body {
  margin: 0;
}
ul {
  padding: 0;
  list-style-type: none;
}

<div id="grand">
  <ul id="parent">
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
    <li class="child">Content</li>
  </ul>
</div>

css 相对于 parent 的 parent 大小

Relative css size to parent of parent

css

width

percentage