DIV設置爲height：auto不能正確顯示

Question

請點擊這裏查看我的網站：http://www.budgie.richardcmpage.com/

爲我一個盒子（底部藍色）div樣式是不調整，將自動高度。正如你所看到的帖子比一行更長，所以我希望它可以自動調整數量。我可以看到，我已經整理了包裝/中斷功能，我只需要背後的背景，就像你現在看到它不工作一樣！

#article_box_outer {  
    width: 800px; 
    position: relative; 
    height: auto; 
    border: 1px solid #337aa4; 
    background: #42592c;  
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:40px; 
    margin-top:10px;  
} 

#article_box_inner{ 
    width: 400px; 
    height: 20px; 
    position: absolute; 
    border-left: 1px solid #337aa4; 
    border-bottom: 1px solid #337aa4; 
    border-right: 1px solid #337aa4; 
    background: #42592c; 
    top: 50px; 
    right: 30px;    
} 

Answer 1

看到HTML結構和CSS的小提琴得到相同的佈局和你想要的CSS。

小提琴：http://jsfiddle.net/sH4TQ/1/

演示：http://jsfiddle.net/sH4TQ/1/embedded/result/

SS：

Answer 2

像您期望的，因爲內div的position: absolute;的外層div沒有表現。

此屬性將div從文檔流中取出並且不保留其空間。取消位置，然後改用margin-top: 50px;。

:)

Answer 3

一對夫婦的事情，而在Firebug亂搞我注意到了。

1. 首先。只是想知道爲什麼你把所有的東西放在相對或絕對的位置？考慮到您的佈局，我不認爲這是必要的。

如果你設置你的容器來顯示錶，這似乎解決了這個問題。 「排序」

#article_box_inner {display:table;} 

的問題是，當添加更多的內容並沒有推這個容器倒#article_box_inner

這是因爲它是絕對定位。有了這個佈局，一切應該能夠使用絕對或相對位置向左浮動。