Question

虽然我的问题之前已经回答了很多次，但我尝试过的所有解决方案似乎都没有用。

我想要做的是一个包含li标签的大div; li标签还包含锚标签，2个div和p标签。
了解大局..我试图制作贴墙（活动板），墙上的帖子看起来像泡泡（div post），泡泡会指向（后箭头）一个缩略图（一个拇指3），使泡泡样式我使post div绝对定位，z-index小于arrow-post。

这是我的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/

一切正常但li标签没有扩展到内容..它只会扩展，如果我将post div的位置更改为relative而不是绝对，我无法更改，因为它必须绝对定位在箭头图像下给它泡泡一下。

任何帮助将不胜感激。

感谢。

Answer 1

好的谢谢大家我想出来..我做了位置：相对并改变了后期div的余量，它的确有效！我以为我这样做了，但也许我做错了让它无法正常工作

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

1 个答案: