div+css实现window xp桌面图标布局（至上而下从左往右）
前不就公司项目要求做一个比较蛋疼的布局，类似于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>
