Home >Web Front-end >HTML Tutorial >div css implements window xp desktop icon layout (top to bottom, left to right)_html/css_WEB-ITnose
div css implements window xp desktop icon layout (top to bottom, left to right)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:28:021330browse
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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn