html列表可滚动

<style>
body{
background:#f0f0f0;
}

.img_celebrity_avatar{
width:80px;
height:80px;
vertical-align:middle;
float:left;
#border:1px solid green;
}

.div_celebrity_row{
width:300px;
height:80px;
margin:8px;
background:#eee;
border:3px solid white;
box-shadow: 5px 5px 5px #888888;
}

.div_celebrity_list{
width:350px;
height:300px;
overflow-y:scroll;
padding:4px;
border:2px dashed #aaa;
}

.ul_celebrity_info{
margin:0;padding:0;
#border:1px solid red;
list-style:none;
}
.div_celebrity_info{
float:left;
width:150px;
margin-top:25px;
margin-left:25px;
#border:1px solid red;
}
</style>

<script src="jquery-1.4.2.min.js"></script>

<div class="div_celebrity_list">
<div class='div_celebrity_row'>
<div style='float'>
<img class='img_celebrity_avatar' src='http://pic62.nipic.com/file/20150329/2531170_103550104000_2.jpg'/>
</div>
<div class='div_celebrity_info'>
<ul class='ul_celebrity_info'>
<li>天气</li>
<li>22</li>
</ul>
</div>
</div>

<div class='div_celebrity_row'>
<div style='float' > <img class='img_celebrity_avatar' src='http://131225.vip602.cn/news/20151207/540228afc07f45b389ebdf01edc5c517.png'/> </div>
<div class='div_celebrity_info'>
<ul class='ul_celebrity_info'>
<li>美食 </li>
<li>33 </li>
</ul>
</div>

</div>

<div class='div_celebrity_row'>
<div style='float' > <img class='img_celebrity_avatar' src='http://pic.58pic.com/10/81/55/53bOOOPIC43.jpg'/> </div>
<div class='div_celebrity_info'>
<ul class='ul_celebrity_info'>
<li>运动 </li>
<li>444 </li>
</ul>
</div>
</div>

<div class='div_celebrity_row'>
<div style='float' > <img class='img_celebrity_avatar' src='http://img.zcool.cn/community/016cd3565d430232f8759647cebcd2.png'/> </div>
<div class='div_celebrity_info'>
<ul class='ul_celebrity_info'>
<li>宠物 </li>
<li>444 </li>
</ul>
</div>
</div>
</div>

<script>
</script>