布局转换的方法

最新推荐文章于 2024-09-03 17:02:58 发布

weixin_30408165

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量80

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/niubenbit/archive/2012/11/16/2772871.html

版权

把正常布局转换成绝对定位的布局。

不能偷懒：必须是两个循环
父级记得要加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 {width:300px; margin:100px auto; border:1px solid black; position:relative;}
 8 #ul1 li {width: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.οnlοad=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>

转载于:https://www.cnblogs.com/niubenbit/archive/2012/11/16/2772871.html

weixin_30408165

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局转换的方法

把正常布局转换成绝对定位的布局。不能偷懒：必须是两个循环父级记得要加relative如果有margin，记得去掉 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
复制链接

扫一扫