把正常布局转换成绝对定位的布局。
- 不能偷懒：必须是两个循环
- 父级记得要加relative
- 如果有margin，记得去掉
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 * {margin:0; padding:0;} 6 li {list-style:none;} 7 #ul1 {300px; margin:100px auto; border:1px solid black; position:relative;} 8 #ul1 li {80px; height:80px; background:#CCC; float:left; margin:10px;} 9 </style> 10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 11 <title>无标题文档</title> 12 <script type="text/javascript"> 13 window.onload=function () 14 { 15 var oUl=document.getElementById('ul1'); 16 var aLi=oUl.getElementsByTagName('li'); 17 var i=0; 18 19 for(i=0; i<aLi.length; i++){ 20 aLi[i].style.left = aLi[i].offsetLeft + 'px'; 21 aLi[i].style.top = aLi[i].offsetTop + 'px'; 22 } 23 24 for(i=0; i<aLi.length; i++){ 25 aLi[i].style.position = 'absolute'; 26 aLi[i].style.margin = 0; 27 } 28 }; 29 </script> 30 </head> 31 32 <body> 33 <ul id="ul1"> 34 <li></li> 35 <li></li> 36 <li></li> 37 <li></li> 38 <li></li> 39 <li></li> 40 <li></li> 41 <li></li> 42 <li></li> 43 </ul> 44 </body> 45 </html>