Question

我试图设置一些元素＆＃39;相对于祖父母元素的宽度百分比＆＃39;宽度。像这样。

<style>
.grand{width:1000px; overflow:hidden;}
.parent{width:2000px; position:relative}
.child1{float:left; width:50%; height:200px; background-color:blue;}
.child2{float:left; width:50%; height:200px; background-color:green;}
</style>


<div class="grand">
 <div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
 </div>
</div>

但是我不知道如何完成这项工作，我怎样才能让子元素直接引用它的祖父母元素而不是直接的父元素？（在这种情况下，如果我将子元素宽度设置为50％，则必须为500px，而不是1000px。）

有可能的方法吗？

Answer 1

您可以使用CSS custom properties，var()和calc()函数

.grand {
--main-width: 1000px;
  width: 1000px;
  overflow: hidden;
}

.parent {
  width: calc(var(--main-width) * 2);
  position: relative
}

.child1, .child2 {
  float: left;
  width: calc(var(--main-width) / 2);
  height: 200px;
}

.child1 {
  background-color: blue;
}

.child2 {
  background-color: green;
}

<div class="grand">
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</div>

Answer 2

请将其更改为：

.parent {宽度：2000像素; position：relative} - ＆gt; .parent {宽度：1000％; 位置：相对; display：inline;}

Answer 3

您可以使用绝对位置到子元素。

应用此css：

.grand{width:1000px; overflow:hidden; position:relative;height:200px;}
.parent{width:2000px; }
.child1{float:left; width:50%; height:200px; background-color:blue; position:absolute; top:0; left:0;}
.child2{float:left; width:50%; height:200px; background-color:green; position:absolute; top:0; left:50%;}

如何设置相对于祖父母元素的宽度而不是直接父元素？

3 个答案: