div css implements window xp desktop icon layout (top to bottom, left to right)_html/css

div css implements window xp desktop icon layout (top to bottom, left to right)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:28:02

Original

1322 people have browsed it

According to the company's project requirements, we have to make a rather painful layout, similar to the window xp desktop image layout method, and we are required to try not to use embedded js scripts and use pure div css layout. We are constantly exploring After some trial and error, I have only tried IE8, firfox, and chrome browsers. Not much else to say, just enter the code.

 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>

Copy after login