2017-02-14 76 views
0

我有3個標籤:第一主div,二是figure並且裏面有一個figcaption,像這樣:如何繼承寬度爲一個孩子的孩子

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

我分配的主要div爲整個文檔寬度的80%。然後,我將figure設置爲其父項的100%,因此它完全包含在主要div的周圍。

之後,我給figcationabsolute的位置,我希望它有主divfigure的寬度100%,因爲它的寬度正好運行作爲裏面的內容結束。

那麼如何將figcaption的寬度分配爲主要的div的全寬?

我試過繼承,但不起作用。另外,我無法獲得figure以外的figcaption標記,因爲從語義上講,這是錯誤的。

回答

1

我想你在figcaption的父元素divfigure的一人失蹤position: relative

figure { 
    position: relative; 
} 

figcaption { 
    position: absolute; 
} 

如果使用position: absolute;top|right|bottom|left值以及widthheight值百分比一樣在計算關係最近的父母沒有職位static。所以它是相對於位置relative|absolute|fixed或最後是html元素的最接近的元素。

演示

Try before buy

0

給位置:相對。

位置絕對需要容器「定位」。

+0

在這裏,我有一個codepen你https://codepen.io/montik/pen/ZLwjZL?editors=1100 – edo