DIV设置为高度：自动无法正确显示

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

由于内部div position: absolute;，外部div的行为不符合您的预期。

此属性将div从文档流中取出，并且不保留其空间。移除位置，然后使用margin-top: 50px;。

：）

Answer 2

查看HTML结构和css的小提琴，以获得您想要的相同布局和CSS。

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

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

SS：

Answer 3

我在Firebug中乱搞的时候注意到了几件事。

1. 首先。只是想知道为什么你有相对或绝对的一切定位？鉴于你的布局，我不认为这是必要的。

如果将容器设置为显示表，这似乎可以解决问题。 “排序”

#article_box_inner {display:table;}

问题在于，当添加更多内容时，它不会将此容器推下 #article_box_inner

这是因为它绝对定位。通过这种布局，一切都应该能够使用绝对或相对位置向左浮动。