如何继承 child 的 child 的宽度

Question

我有 3 个标签：第一个主要 div，第二个是 figure，里面有一个 figcaption，像这样：

<div class="main-div">
  <figure>
    <figcation>
    </figcaption>
  </figure>
</div>

我将主要 div 指定为整个文档宽度的 80%。然后我将 figure 设置为其 parent 的 100%，因此它完全环绕主要 div.

之后，我给 figcation 一个 absolute 的位置，我希望它有 100% 主 div 的宽度，就像 [=14] =], 因为它的宽度刚好和里面的内容一样.

那么如何将 figcaption 的宽度指定为主 div 的全宽？

我试过继承，但没用。此外，我无法在 figure 之外获取 figcaption 标记，因为从语义上讲，这是错误的。

Answer 1

给出数字position:relative.

绝对位置需要容器为"positioned".

Answer 2

我认为您在 figcaption 的父元素之一 div 或 figure:

上遗漏了 position: relative

figure {
    position: relative;
}

figcaption {
    position: absolute;
}

如果您使用 position: absolute;，则 top|right|bottom|left 值以及 width 和 height 值（如百分比）是根据没有位置static。所以它是相对于位置为 relative|absolute|fixed 的最近元素或最后是 html 元素。

演示

Try before buy