logo标签列表

相对于父级元素的父级元素的CSS尺寸

csswidthpercentage
8
我之所以问这个问题，是因为我看到了一个与我的问题非常相似的问题（链接）。
<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{ 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
}
3
如果你想要获取祖先元素的宽度，为什么要在父元素中保留这个属性？我不认为有这个需求，请解释一下。 - Mr_Green
1
顺便说一下，您可以通过将position: relative应用于祖先元素，然后将position: absolute应用于子孙元素来实现。但是这会破坏布局。如果您可以接受，请使用此方法。 - Mr_Green
我在问题中添加了一些解释。 - user2078158
3个回答
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>

2
事实上，您可以这样做，但需要祖父元素具有 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>

请考虑最新编辑的问题，因为在父级中我有6个孩子而不是一个。 - user2078158
请不要更改带有新信息的问题，这会使答案无效。最好是提出一个新问题并参考原始问题。请参见此处。 - Paulie_D
0

您可以使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接