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

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

WBOY

Libérer： 2016-06-24 12:28:02

original

1297 Les gens l'ont consulté

前不就公司项目要求做一个比较蛋疼的布局，类似于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>

Copier après la connexion