css - 相对于祖 parent div 的大小设置宽度

Question

我的结构目前看起来大致类似于下面的代码片段；我怎样才能使 div2 的宽度为其祖父 div 的 50%，而不是其直接父级的 50%？

<div id="grandParent" style="width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; background-color: yellow; border-color: yellow">
  <div id="div1" style="width: 100px; background-color: aqua">
    div1
  </div>
  <div id="parent" style="width: 100%; background-color: green">
    parent<br>
    <div id="div2" style="width: 50%; background-color: fuchsia; margin: 0 auto;">
      div2
    </div>
  </div>
</div>

Answer 1

我们可以做一些数学运算。父级的宽度是 P - 100px 并且你需要有 P/2 所以如果你做 X/2 + 50px where X = P - 100px 你将得到 P/2。还最好使用 flex-grow:1 而不是 width:100% 来避免收缩效果，并使第一个 div 始终位于 100px

console.log($('#div2').width())
console.log($('#grandParent').width())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grandParent" style=" display: flex; flex-direction: row; flex-wrap: nowrap; background-color: yellow; border-color: yellow">
  <div id="div1" style="width: 100px; background-color: aqua">
    div1
  </div>
  <div id="parent" style="flex-grow:1; background-color: green">
    parent<br>
    <div id="div2" style="width: calc(50% + 50px); background-color: fuchsia; margin: 0 auto;">
      div2
    </div>
  </div>
</div>

您可以考虑使用 CSS 变量来简化此操作:

console.log($('#div2').width())
console.log($('#grandParent').width())

:root {
 --w:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grandParent" style="display: flex; flex-direction: row; flex-wrap: nowrap; background-color: yellow; border-color: yellow">
  <div id="div1" style="width: var(--w); background-color: aqua">
    div1
  </div>
  <div id="parent" style="flex-grow:1;background-color: green">
    parent<br>
    <div id="div2" style="width: calc(50% + var(--w)/2); background-color: fuchsia; margin: 0 auto;">
      div2
    </div>
  </div>
</div>