CSS溢出：隱藏錯誤

我依靠CSS屬性overflow:hidden含有3嵌套&浮動div秒。 overflow:hidden適用於此html的父代div。CSS溢出：隱藏錯誤

當我不使用overflow:hidden我最後div是出位線浮動div S的範圍內，但是當我使用overflow:hidden整個div結構向下移動。

希望有人能明白我的意思是上面的文字，但情況不是我提供的CSS代碼了。

CSS：

#header { 
    display: block; 
    width: 590px; 
    height: 50px; 
    background: #336699; 
    margin: 0 auto; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 

    overflow: hidden; 
} 

.header-left-wrapper { 
    float: left; 
    width: 150px; height: 50px; 
    background: #ff0000; 
} 
.header-input-wrapper { 
    float: left; 
    width: 300px; height: 50px; 
    background: #00ff00; 
} 
.header-right-wrapper { 
    float: right; 
    width: 140px; height: 50px; 
    background: #ff0000; 
    overflow: hidden; 
}

爲了澄清，由於某種原因，當我申請overflow:hidden到.header-right-wrapper，整個頭，如果我只是應用了margin或position下移。任何幫助？提前致謝。

來源

2013-02-15 JaPerk14

的jsfiddle它，請 – shnisaka 2013-02-15 03:34:26

這將幫助，如果你給我們說HTML – 2013-02-15 03:34:44

這裏是fiddle.net（HTTP：// JS fiddle.net/ZETus/） – JaPerk14 2013-02-15 03:41:51

.header - 右 - 包裝在下降，因爲作爲一個浮動元素，它需要清除頁面上的其他東西（.close）。當你給#header {overflow：hidden}時，它被迫包含它的子元素，至少達到它的{height}，包括那個浮動的div。因此它向下移動。問題不在於與#header相關的標記，而是整個Lightbox佈局。這裏有一個修復：

.close {margin-bottom: -100px;}

http://jsfiddle.net/ZETus/4/

另一種方法是使用絕對定位採取.close跳出流程，使浮子不必清除：

http://jsfiddle.net/ZETus/5/

.close { 
    position: absolute; 
    right: -10px; 
    top: -10px; 
}

來源

2013-02-15 04:09:33 isherwood

太棒了！有效。但你能解釋它爲什麼起作用嗎（我對佈局不太好）。對我而言，似乎將margin-bottom添加到.close會使#header更進一步。 – JaPerk14 2013-02-15 04:13:18

請注意，這是一個負邊距，它允許下面的元素侵入其空間。請記住標記您接受的答案。 – isherwood 2013-02-15 04:17:46

答案更新了另一個選項。 – isherwood 2013-02-15 04:21:04

CSS溢出：隱藏錯誤

回答

相關問題