相对于父级父级的css大小

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>

一个可设置的CSS宽度child相对(以%为单位),以该的grand,完全无视父母的宽度的值.例如:

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

一些解释补充说:

考虑一下:

parent它有6 child秒,我们只想显示4个主题,以便它们有25%grand的宽度.

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

Answer 1

您也可以使用 % 来调整父级的大小;)，因此更容易决定可以看到多少子级。

#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>