私の質問はこれまで何度も答えられてきましたが、提案されたすべての解決策を試しましたが、何も機能していないようです。
やろうとしているのは、liタグを含む大きなdivです。liタグには、アンカータグ、2 div、およびpタグも含まれます。
全体像を理解するために..投稿ウォール（アクティビティボード）を作成しようとすると、ウォールにはバブルのように見える投稿（div投稿）があり、バブルはサムネイル画像（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>
すべて正常に機能しましたが、liタグはコンテンツに拡張されません。投稿divの位置を絶対ではなく相対に変更した場合にのみ拡張されます。これを変更するには、矢印画像の下に絶対に配置する必要があるため、変更できません。バブルルック。
どんな助けでもいただければ幸いです。
ありがとう。