如何强制div扩展到其内容？

虽然我的问题已经被回答了很多次，但所有提出的解决方案我都试过了，似乎没有任何工作。如何强制div扩展到其内容？

我想要做的是一个包含li标签的大div; li标签还将包含锚标签，2个div和p标签。
为了解这个大图。我试图做一个发贴墙（活动板），墙上的帖子看起来像一个泡泡（div post），泡泡会指向（后箭头）到一个缩略图图像（一个thumb3），使我的发布div的绝对位置的z-index小于箭头后的气泡样式。

，这里是我的CSS：

.activity-board { 

background:#fff; 
width:600px; 
min-height:652px; 
height:auto; 
border:solid 2px #e7d28d; 
border-radius: 6px; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1); 
box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1); 
float:left; 
margin-left:20px; 

} 

    .post-body{ 
    position:relative; 
    display:block; 
    list-style-type:none; 
    width:600px; 
    height:auto; 
    background:#f9f9f9; 
    border-bottom:1px solid #CBCBCB; 
    border-radius:4px 4px 0 0; 
    -moz-border-radius:4px 4px 0 0; 
     -webkit-border-radius:4px 4px 0 0; 
    background: #fff; 
    float:left; 
    overflow:visible; 
    clear:both; 
    z-index:9; 
    } 

.post{ 

position:absolute; 
width:500px; 
line-height:20px; 
height:auto; 
background:#FFF; 
display:block; 
margin-top:22.5px; 
margin-left:77px; 
text-align:left; 
float:left; 
z-index:1; 

} 

.post-arrow{ 

position:relative; 
margin-top:32px; 
margin-left:6px; 
width:12px; 
height:18px; 
background:url(images/post-arrow.png); 
float:left; 
z-index:5; 

} 

.post p{ color:#025373; padding:8px; word-wrap:break-word; } 

a.thumb-3 { 

margin-top:18px; 
display:block; 
margin-left:18px; 
width:46px; 
height:46px; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
z-index:10; 
float:left; 

} 


a.thumb-3 img{ 

padding:0; 
margin:0 auto; 
width:46px; 
height:46px; 
float:left; 
border-radius:3px; 
-moz-border-radius:3px; 
-webkit-border-radius:3px; 

}

这里是我的html：

<ul> 
<li class="post-body"> 
     <a class="thumb-3"><img src="images/Alsheikh Center (177).jpg" /></a> 
     <div class="post-arrow"></div> 

     <div class="post"> 
     <p> 
     Hi there! 
     </p> 

    </div> 
</li> 
</ul>

http://jsfiddle.net/r9YpX/

一切工作正常，但李标签不扩大到内容..它只扩展，如果我改变后div的立场相对e不是绝对的，我不能改变它，因为它必须绝对放置在箭头图像下面，以使其具有泡沫外观。

任何帮助，将不胜感激。

谢谢。

来源

2013-03-16 Engineeroholic

你不能在绝对定位的元素周围流动内容。如果你有图像显示的小提琴会有帮助。 http://jsfiddle.net/r9YpX/ – isherwood 2013-03-16 18:46:33

更新小提琴：http://jsfiddle.net/r9YpX/1 – isherwood 2013-03-16 18:49:49

对不起，我试图上传图片，但我可以因为我不到10分的声誉:) – Engineeroholic 2013-03-16 18:50:16