的絕對定位的兒童

一個工作clearfix考慮下面的代碼：的絕對定位的兒童

<html> 
<head></head> 
<body> 
    <div id="A"> 
     <div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div> 
    </div> 
</body> 
</html>

一個結果有0的高度，無論乙及其內容的大小。我想A根據裏面的內容適當地設置其高度B。

這是可以實現與CSS？

到目前爲止，我還沒有找到任何方式來做到這一點，但我非常確定CSS應該能夠處理這個問題，它看起來像一個非常微不足道的事情。

我知道有很多關於實現clearfix的帖子，但它們看起來已經過時了。現在是2016年，也許有新的選擇。

重要的東西：這是我想要實現的，我沒有寫出那麼小的佈局和那些風格屬性偶然。請不要在佈局與我介紹的不同的地方提供替代方案。

來源

2016-07-07 almosnow

位置：絕對需要元件斷開的流動，所以它是由任何其他元件看不見和有沒有像清除絕對或固定元件。 Clearfix的方法是關於浮動元素，JavaScript可以幫助你，但我不知道任何腳本準備好了這種類型... –

你只想在CSS ?.你可以用js嗎？ – Thinker

@Thinker我寧願它在CSS中。 – almosnow

既然您希望A的高度與B中的內容相匹配，您可以通過向A添加display: list-item;來完成。display: list-item;生成內容的塊框。

#A { 
 
    background-color: yellow; 
 
    position: relative; 
 
    display: list-item; 
 
}

<div id="A"> 
 
    <div id="B" style="left: 0; position: absolute; top: 0;">... STUFF ...</div> 
 
</div>

來源

2016-07-07 20:41:50 rps

謝謝rps，非常有趣的選擇，但它沒有考慮到像img這樣的元素。 – almosnow

的絕對定位的兒童

回答

相關問題