Heim >Web-Frontend >HTML-Tutorial >div+css实现window xp桌面图标布局（至上而下从左往右）_html/css_WEB-ITnose
div+css实现window xp桌面图标布局（至上而下从左往右）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:28:021314Durchsuche
前不就公司项目要求做一个比较蛋疼的布局，类似于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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS相关的随笔｛ div透明度设置, ｝_html/css_WEB-ITnoseNächster Artikel：css 兼容FF和IE的div之height及min-height_html/css_WEB-ITnose