我有3个标签:第一个是主div,第二个是figure,内部有一个figcaption,如下所示:

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


我将主div分配为整个文档宽度的80%。然后,将figure设置为其父级的100%,以便将其完全包裹在主div周围。

之后,我给figcation一个absolute的位置,我希望它具有与100%一样的主div宽度的figure,因为它的宽度正好作为内容的结尾。

那么,如何将figcaption的宽度分配为主要div的全宽?

我尝试继承,但不起作用。另外,我不能在figcaption之外获取figure标记,因为从语义上讲,这是错误的。

最佳答案

我认为您在position: relative的父元素figcaptiondiv之一上缺少figure

figure {
    position: relative;
}

figcaption {
    position: absolute;
}


如果使用position: absolute;,则会相对于没有位置top|right|bottom|left的最接近的父级计算width值以及heightstatic值(如百分比)。因此,它是相对于位置为relative|absolute|fixed或最近为html元素的最近元素的。

演示版

Try before buy

07-24 09:44
查看更多