如何讓浮動div在其父級註冊爲內容？

一些更多的細節：我有兩個divs，一個float:left，其他float:right，父母是clear:both，這樣我就可以在頁面上向下訂購容器父母。具體的CSS是在這裏：如何讓浮動div在其父級註冊爲內容？

#content { 
    margin-left:auto; 
    margin-right:auto; 
    width: 750px; 
    margin-top:50px; 
    position:relative; 
} 
.container-div { 
    padding-top:7px; 
    padding-bottom:10px; 
    clear:both; 
    background-color:#b0c4de; 
} 
.left-side { 
    float:left; 
} 
.right-side 
    float:right; 
}

的問題是，母公司的background-color只覆蓋在容器的頂部一點點，和Chrome檢查顯示內容顯然是那部分。是什麼賦予了？我如何讓div看到浮動的div作爲內容？

來源

2012-05-18 Alex

jsFiddle將是有用的 – jacktheripper

可能重複的[拆分成2列使用CSS]（http://stackoverflow.com/questions/1964297/split-div-into-2-columns-using-css） – tybro0103

嘗試，以便採取在全高度的它是孩子們在家長

來源

2012-05-18 15:40:23 jacktheripper

' overflow：hidden'在這種情況下也可以工作（可能也可能不合適，我希望'clear：both'能夠工作，那麼這需要應用於父元素內部的元素，但低於浮動元素。學習你的CSS，謝謝 – mrtsherman

好點，我同意，downvote是奇特的：p – jacktheripper

父.container-div應設置爲display: inline-block;加入overflow: auto。

來源

2012-05-18 15:45:19

你的DOM結構或多或少像這樣

<div class="container-div"> 
    <div class="left-side"></div> 
    <div class="right-side"></div> 
</div>

與類容器的父的div具有100％的寬度。現在，您正試圖在父div內浮動兩個子div而不給它們任何寬度，默認情況下，子div將佔用100％的寬度。所以你必須定義最多50％的子div的寬度，那麼只有你的浮動纔會有效。

現在嘗試以下代碼

.clear{clear:both} 

.container-div { 
    padding-top:7px; 
    padding-bottom:10px; 
    background-color:#b0c4de; 
} 
.left-side { 
    float:left; 
    width=50%; 
} 
.right-side 
    float:right; 
    width=50%; 
}

而且你的DOM應該是這樣的

<div class="container-div"> 
     <div class="left-side">your left divs content</div> 
     <div class="right-side">your right divs content</div> 
     <div class="clear"></div> 
</div>

現在你會看到，一切都在正確的位置和Chrome檢查會顯示它完美。

來源

2012-05-22 20:35:38

如何讓浮動div在其父級註冊爲內容？

回答

相關問題