具有浮動子元素的絕對定位包裝將不會擴展超過其父元素

我的問題是this question的副本，但我需要一個純CSS解決方案，因此無法使用JS來修復它。所以這裏是我的問題：具有浮動子元素的絕對定位包裝將不會擴展超過其父元素

爲什麼不包裝擴大，雖然它是絕對定位，不應該被限制在其父？
爲什麼它完全適合父母？如果浮動的孩子有問題，它不應該擴展！

CSS：

#parent{ 
    position: relative; 
    height: 200px; 
    width: 60px; 
    background: red; 
} 

#wrapper{ 
    background: blue; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#wrapper > div{ 
    float: left; 
    width: 30px; 
    background: yellow; 
    margin: 1px; 
}

HTML：

<div id='parent'> 
    <div id='wrapper'> 
     <div>1</div> 
     <div>2</div> 
     <div>3</div> 
     <div>4</div> 
     <div>5</div> 
    </div> 
</div>

這裏是JSiddle demo。

來源

2013-06-27 Peyman

澄清：你想藍色的div一樣寬的黃色的嗎？ – xec

那麼，浮動實際上是拉伸#wrapper（'position：absolute;'默認沒有全寬），但這是因爲另一個副作用位置：絕對;有，它引入了一個新的塊格式化上下文，其中將包含浮動。（意思是說，如果黃色的div沒有浮動，藍色的div會變窄） – xec

@xec抱歉我的困惑。現在我和OP一樣困惑。這是怎麼當你做#parent，例如110像素寬，＃wrapper也變成110px寬，但如果#parent更寬，比如說300px，＃wrapper只有它的內容一樣寬？ –

這是因爲parent div上的position: relative。

如果你刪除它，然後在包裝類中添加right:0 - 那麼你會看到它擴大到最大寬度。

FIDDLE

來源

2013-06-27 12:20:26 Danield

謝謝你的回答，但是包裝將相對於身體定位，這不是我想要的。我需要它相對於父母的位置。 – Peyman

如果剔除掉父DIV的相對位置，它會工作。但是，它會與身體而不是父母對齊。

您將需要調整包裝的頂部和左側位置。

JSFIDDLE

#parent{ 
    height: 200px; 
    width: 60px; 
    background: red; 
} 

#wrapper{ 
    background: blue; 
    position:absolute; 
    top: 8px; 
    left: 8px; 
    right: 0px; 
} 

#wrapper > div{ 
    float: left; 
    width: 30px; 
    background: yellow; 
    margin: 1px; 
}

來源

2013-06-27 13:07:53 designtocode

具有浮動子元素的絕對定位包裝將不會擴展超過其父元素

回答

相關問題