讓父DIV附上漂浮的小孩DIV

我一直無法創建包含浮動子DIV的父DIV。讓父DIV附上漂浮的小孩DIV

<div id="parent"> 
    <div class="child1">content</div>  
    <div class="child2">content</div> 
    <div class="child3">taller content</div> 
</div>

...（如果它被稱呼這種方式與填充），以適應.child3.其中#parent將垂直擴展，如果我加了邊框#parent會附上所有三個孩子的DIV。

確定這種安排以確保這種行爲的最佳方式是什麼？

尋找最佳實踐。

來源

2011-10-02 jw60660

你在使用'clear'嗎？ –

Bhesh，我正在清除每個新的父級div，因爲我將一個頁面堆疊爲一個div：一個用於導航欄，另一個用於三列內容，然後另一個用於更多內容。但是，當我這樣做，並嘗試顯示頂部和底部的邊界，我看到父母不伸展覆蓋子div。 – jw60660

您可以在父項中添加一個「包裝器」div，並在其中添加一個「clear：both」元素。勾選此的jsfiddle http://jsfiddle.net/yvVP8/

<div id="parent"> 
    <div id="wrapper"> 
     <div class="child1">content</div> 
     <div class="child2">content</div> 
     <div class="child3">taller content lala lala lalal lala</div> 
    </div> 
    <div class="clear"></div> 
</div>

而CSS：

#parent { 
    border: 1px solid #000; 
    width: 300px; 
} 

#wrapper .child1, #wrapper .child2, #wrapper .child3 { 
    float: left; 
    padding: 5px; 
    width: 90px; 
} 

div.clear { 
    clear: both; 
}

來源

2011-10-02 14:47:23 oal

額外的'＃wrapper' div是不需要的，你可以使用'：after'這個僞元素和style元素。 '#parent：after {content：'';顯示：塊; clear：both;}' –

正確，但IE7及更早版本不支持'：after'。如果這不是問題，那麼'：after'就是一樣好（甚至更好）。 [來源]（http://www.quirksmode.org/css/contents.html#t15） – oal

謝謝你們。快速問題：額外的div，人們總是說在你的標記中避免太多的div。但似乎有必要得到我正在尋找的東西，除非我有機會打破IE7和更早瀏覽器的佈局。每頁有幾個額外的div是否是一件大事？ – jw60660

簡單

#parent { 
    overflow:hidden; 
}

將做的工作：

http://jsfiddle.net/XAbhY/

來源

2011-10-02 16:08:14 Darklg

您可以簡單地將float:left;添加到父div。

它應該強制父母的大小/邊框包裹所有兄弟姐妹。不確定它是否有效，但適用於我。

來源

2012-10-12 00:19:49 IIIOXIII

讓父DIV附上漂浮的小孩DIV

回答

相關問題