虽然我的问题之前已经回答了很多次，但是我尝试过所有提出的解决方案，但似乎没有任何效果。
我想做的是一个包含 li 标签的大 div；li 标签还将包含锚标签、2 个 div 和 p 标签。
了解大局..我正在尝试制作一个帖子墙（活动板），墙上的帖子看起来像一个气泡（div post），并且气泡将指向（后箭头）缩略图（拇指3 )，为了制作气泡样式，我将帖子 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>
一切正常，但 li 标签不会扩展到内容.. 如果我将帖子 div 的位置更改为相对而不是绝对，它只会扩展，我无法更改，因为它必须绝对定位在箭头图像下方才能给它泡沫的样子。
任何帮助，将不胜感激。
谢谢。