Относительный размер css для родителя родителя

Я спрашиваю это, потому что я видел очень похожий вопрос на мой здесь. имея

<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's ширина.

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

3 ответов

вы также можете использовать % для размера родителя ;), поэтому гораздо проще решить, сколько/много детей можно увидеть.

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

на самом деле, вы можете, но это требует, чтобы бабушка и дедушка 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>
2

вы можете использовать em единиц. Это не требует JavaScript или необходимости абсолютно позиционировать.

Как только вы хотите отобразить текстовое содержимое, сбросьте размер шрифта обратно в пределах диапазона содержимого / div.

http://jsbin.com/xibocodaba/edit?html, css, выход

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