div+css实现类似winxp桌面图标布局

　　公司要求做一个类似于window xp桌面图片布局方式同时要求尽量不要用嵌入js脚本，用纯div+css布局在不断探索和摸索下勉强实现了,感兴趣的朋友可以了解下，希望本文可以帮助到你

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

　　复制代码代码如下:

　　!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

　　html xmlns="http://www.w3.org/1999/xhtml"

　　head

　　meta charset="utf-8"/

　　title window xp桌面图标布局 /title

　　style

　　html,body{ margin:0; border:0; padding:0; width:100%; height:100%; }

　　.parent{ display:block; background:gray; width:100%; height:100%; }

　　.parent{

　　-webkit-column-width:100px;

　　-moz-column-width:100px;

　　-webkit-column-gap:0px;

　　-moz-column-gap:0px;

　　}

　　.parent{ writing-mode: tb-lr; }/*ie8 竖直排列*/

　　.parent{ *white-space:nowrap;}

　　.child{

　　display:inline-block;

　　*display:inline;

　　margin:10px 10px 10px 10px;

　　border:5px solid black;

　　padding:5px;

　　width:50px;

　　height:50px;

　　text-align:center;

　　background:lightblue;

　　}

　　.child{ writing-mode: lr-tb; } /*ie8 竖直排列*/

　　/style

　　/head

　　body

　　div

　　div 1 /div

　　div 2 /div

　　div 3 /div

　　div 4 /div

　　div 5 /div

　　div 6 /div

　　div 7 /div

　　div 8 /div

　　div 9 /div

　　div 10 /div

　　div 11 /div

　　div 12 /div

　　div 13 /div

　　div 14 /div

　　div 15 /div

　　div 16 /div

　　div 17 /div

　　div 18 /div

　　div 19 /div

　　div 20 /div

　　div 21 /div

　　div 22 /div

　　div 23 /div

　　/div

　　/body

　　/html