div+css实现window xp桌面图标布局(至上而下从左往右)
2013-02-20 15:21
375 查看
前不就公司项目要求做一个比较蛋疼的布局,类似于window xp桌面图片布局方式,而且要求尽量不要用嵌入js脚本,用纯div+css布局,在不断探索和摸索下也只现实了IE8+,firfox, chrome浏览器,别的不多说,直接上代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>window xp桌面图标布局</title> <style> html,body{ margin:0; border:0; padding:0; width:100%; height:100%; } .parent{ display:block; background:gray; width:100%; height:100%; } .parent{ -webkit-column-width:100px; -moz-column-width:100px; -webkit-column-gap:0px; -moz-column-gap:0px; } .parent{ writing-mode: tb-lr; }/*ie8 竖直排列*/ .parent{ *white-space:nowrap;} .child{ display:inline-block; *display:inline; margin:10px 10px 10px 10px; border:5px solid black; padding:5px; width:50px; height:50px; text-align:center; background:lightblue; } .child{ writing-mode: lr-tb; } /*ie8 竖直排列*/ </style> </head> <body> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> <div class="child">10</div> <div class="child">11</div> <div class="child">12</div> <div class="child">13</div> <div class="child">14</div> <div class="child">15</div> <div class="child">16</div> <div class="child">17</div> <div class="child">18</div> <div class="child">19</div> <div class="child">20</div> <div class="child">21</div> <div class="child">22</div> <div class="child">23</div> </div> </body> </html>
相关文章推荐
- div+css实现window xp桌面图标布局(至上而下从左往右)
- div+css实现类似winxp桌面图标布局(至上而下从左往右)
- ul和li简单语句实现DIV+CSS分两列(多列)布局显示
- DIV+CSS三列式布局的实现方法
- JS+DIV+CSS排版布局实现美观的选项卡效果
- css实现圣杯布局(两栏固定-中列浮动-中列div排在前面)--详解
- DIV+CSS右列宽度自适应布局的不同实现方法
- ul和li简单语句实现DIV+CSS分两列(多列)布局显示(转)
- <div+css页面布局课堂笔记>7---登录和注册界面的实现
- div+css实现左中右布局,解决右边一块掉落的问题
- 以div代替frameset,用css实现仿框架布局
- DIV+CSS实现网页布局
- 如何利用CSS+DIV 实现三列自适应高和宽的布局(不用javascript)
- 用DIV+CSS实现国内经典式三行两列布局
- 用纯CSS实现三列DIV等高布局的方法
- div+css布局的图片连续滚动js实现代码
- HTML CSS + DIV实现整体布局
- 用CSS实现三列DIV等高布局
- 用CSS实现三列DIV等高布局以传达更好的视觉效果
- 地图布局相关----CSS实现div的高度填满剩余空间