幾個造型問題

Question

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

我的朋友名單框有兩個問題。 1.圖像寬度設置爲100px，但高度不同。這裏的問題是，friendlisting 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>