假如有
<ol> <li>.....</li><li>.....</li><li>.....</li><li>.....</li><li>.....</li> <li>.....</li><li>.....</li><li>.....</li>..........</ol>我想实现固定高度，第一列是前面五个序号是1,2,3,4，5。然后超过高度后到第二列排序第二列的序号是6,7,8,9,10以此类推。用ul li： float left实现的是横向排序，明白我的意思吗？
解决方案
<html><head> <title>Bootstrap</title> <meta charset="utf-8"/> <style type="text/css"> body,div{margin: 0;padding: 0;} #list_item{overflow-x: scroll;overflow-y: hidden;width: 500px;} .list_inner{height: 170px;} .list{height: 150px;float: left;position: relative;} </style></head><body><div id="list_item"> <div class="list_inner"> <ol class="list"> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> <li>周末再看吧</li> </ol> </div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script type="text/javascript"> $(function(){ var i_height = $('.list li:first').height(); var i_width = $('.list li:first').width()+60; var o_height = $('.list').height(); var len = $('.list li').length; var br = parseInt(o_height/i_height); $('.list_inner,.list').css('width',(parseInt(len/br)+1)*i_width+'px'); for(var i = 0; i<len/br;i++){ var dom = (i!=parseInt(len/br)?$('.list li').slice((i+1)*br,(i+2)*br+1):$('.list li:gt('+(i+1)*br+')')); $.each(dom,function(j,item){ $(item).css({'position':'absolute','left':(i+1)*i_width+40+'px','top':j*i_height+'px'}); }); } })</script></div></body>就这样吧 虽然觉得不太简洁