div+css实现window xp桌面图标布局（至上而下从左往右）

最新推荐文章于 2024-03-24 09:36:57 发布

Jlins

最新推荐文章于 2024-03-24 09:36:57 发布

阅读量1.5k

点赞数

前不就公司项目要求做一个比较蛋疼的布局，类似于window xp桌面图片布局方式，而且要求尽量不要用嵌入js脚本，用纯div+css布局，在不断探索和摸索下也只现实了IE8+,firfox, chrome浏览器，别的不多说，直接上代码。

 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 <meta charset="utf-8"/>
 5 <title>window xp桌面图标布局</title>
 6 <style>
 7 html,body{ margin:0; border:0; padding:0; width:100%; height:100%; }
 8 .parent{ display:block; background:gray; width:100%; height:100%; }
 9 .parent{
10     -webkit-column-width:100px; 
11     -moz-column-width:100px;
12     -webkit-column-gap:0px; 
13     -moz-column-gap:0px;
14 }
15 .parent{ writing-mode: tb-lr; }/*ie8 竖直排列*/
16 .parent{ *white-space:nowrap;}
17 
18 .child{ 
19     display:inline-block; 
20     *display:inline; 
21     margin:10px 10px 10px 10px; 
22     border:5px solid black; 
23     padding:5px; 
24     width:50px; 
25     height:50px; 
26     text-align:center; 
27     background:lightblue;    
28 }
29 .child{ writing-mode: lr-tb; } /*ie8 竖直排列*/
30 </style>
31 </head>
32 <body>
33 <div class="parent">
34     <div class="child">1</div>
35     <div class="child">2</div>
36     <div class="child">3</div>
37     <div class="child">4</div>
38     <div class="child">5</div>
39     <div class="child">6</div>
40     <div class="child">7</div>
41     <div class="child">8</div>
42     <div class="child">9</div>
43     <div class="child">10</div>
44     <div class="child">11</div>
45     <div class="child">12</div>
46     <div class="child">13</div>
47 
48     <div class="child">14</div>
49     <div class="child">15</div>
50     <div class="child">16</div>
51     <div class="child">17</div>
52     <div class="child">18</div>
53     <div class="child">19</div>
54     <div class="child">20</div>
55     <div class="child">21</div>
56     <div class="child">22</div>
57     <div class="child">23</div>
58 </div>
59 </body>
60 </html>