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

【问题标题】：how to set width relative to grandparent elements not direct parent elements?如何设置相对于祖父元素而不是直接父元素的宽度？
【发布时间】：2023-04-10 01:46:02
【问题描述】：

我正在尝试使用相对于祖父元素宽度的百分比来设置某些元素的宽度。像这样。

<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%，它必须是 500 像素，而不是 1000 像素。）

有没有可能的方法来做到这一点？

【问题讨论】：

标签： javascript jquery css width

【解决方案1】：

#grand {width: 1000px; height:200px; overflow: hidden; position: relative;}
#parent {min-width: 100%; height: 100%; display: flex;}
.child {flex: 1; height: 100%;}

<script>
  var childCount = 4;
  var childSize = 50; // in percentage
  document.getElementById("parent").style.width = (childSize * childCount) + "%";
</script>
<div id="grand">
  <div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

【讨论】：

【解决方案2】：

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

应用这个 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】：

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

【讨论】：

@JamesDavidDeann 要验证设置的预期值，您可以执行 document.querySelectorAll(".grand, .parent, .child1, .child2") .forEach(el => console.log(`${el.className}, width:${window.getComputedStyle(el).width}`))

【解决方案4】：

请改成：

.parent{宽度:2000px;位置：相对} --> .parent{宽度：1000%; 位置：相对；显示：内联；}

【讨论】：