反映其內容的包裝尺寸

Question

Take a look at this Fiddle。

我很困惑，爲什麼#wrapper不擴大，以適應其中的divs。這裏缺少什麼？

作爲一個便箋，任何想法爲什麼我的<hr>不能正確顯示？

Answer 1

包裝不會展開，因爲裏面的項目是浮動的並且不在文檔的自然流程中。

你可以告訴包裝中加入一個塊級元素來包裝的末端，告訴它擴大在浮動元素，清除所有花車：

#wrapper:after{ 
    content:"."; 
    display:block; 
    clear:both; 
    visibility:hidden; 
} 

而且，你必須的高度包裝設置爲100px。

這是你的提琴的更新版本：http://jsfiddle.net/kWJ79/9/

至於你hr，究竟是什麼你想要做什麼？看起來你想要在2個div之間創建一個垂直條。它是否正確？

UPDATE

如果你想創建左，右div的我會考慮一個稍微不同的路線之間的線。

我會做的是把左邊的div放在它自己的容器裏面，它有一個正確的填充，邊距和邊框。這樣你就沒有在你的代碼中浮動多餘的div，並且需要使用hr。

這裏有一個更新的擺弄這個例子：http://jsfiddle.net/kWJ79/15/

#left_wrapper{ 
    margin-right:5px; 
    padding-right: 5px; 
    border-right:1px solid red; 
    float:left; 
} 

請注意，我已經從#left DIV取出float:left;並把它放在#left_wrapper代替。

Answer 2

您已指定高度值。