Question

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

我的朋友列表框有两个问题。 1.图像宽度设置为100像素，但高度不同。这里的问题是，友元列表div不会随着图像的高度而延伸。结果图像叠加在底部边框上。 2.普通朋友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>

几个造型问题

1 个答案: