css - 很少有样式问题

Question

http://img263.imageshack.us/img263/6803/32007451.jpg http://img263.imageshack.us/img263/6803/32007451.jpg

我的好友列表框有两个问题。 1. 图片宽度设置为 100px，但高度不同。这里的问题是，好友列表 div 没有像它应该的那样随着图像的高度一起扩展。结果图像在底部边框上定位过度。 2、commonfriends div需要扩展高度，填满好友列表框。没有发生。

我花了几个小时来解决这两个问题，就是没能成功。任何建议表示赞赏!

我的html

<div class="friendlisting">
                                <a href="#"><img src="http://www.hurriyet.com.tr/_np/3375/8623375.jpg" alt="xxxx" class="profile" /></a>
                                <div class="userinfo">
                                    <span><strong><a href="#">George Lexington</a></strong></span>
                                    <span>Bruges, Belgium</span>
                                </div>
                                <div class="commonfriends">13 common friends</div>
                                <div class="tools">
                                    <span><img src="images/icons/user_add.png" />Add to friend list</span>
                                    <span><img src="images/icons/email_edit.png" />Send Message</span>     
                                </div>                        
                            </div>

CSS

#content .friendlisting { min-height:40px; padding:5px 0 5px; border-bottom:1px solid #DDD; }
#content .friendlisting img.profile { float:left; width:100px;  }
#content .friendlisting .userinfo { float:left; width: 200px; padding:10px; }
#content .friendlisting .userinfo span { display:block; }
#content .friendlisting .commonfriends { float:left; width:150px; height:100%; background:#ffe996; } 
#content .friendlisting .commonfriends:hover { background:#FEDF62; } 
#content .friendlisting .tools { float:left; width:160px; }
#content .friendlisting .tools span { display:block; }

Answer 1

您可以尝试使用这样的清除 div:

<div class="friendlisting">
    <a href="#"><img src="http://www.hurriyet.com.tr/_np/3375/8623375.jpg" alt="xxxx" class="profile" /></a>
    <div class="userinfo">

        <span><strong><a href="#">George Lexington</a></strong></span>
        <span>Bruges, Belgium</span>
    </div>
    <div class="commonfriends">13 common friends</div>
    <div class="tools">
        <span><img src="images/icons/user_add.png" />Add to friend list</span>
        <span><img src="images/icons/email_edit.png" />Send Message</span>     
    </div>

<div style="clear:both;"></div> 
</div>

或者如果你不喜欢行内样式

.clear
{
  clear:both;
}

然后 <div class="clear"></div>