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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
