div+css实现windowxp桌面图标布局（至上而下从左往右）_html/css_WEB-ITn

前不就公司项目要求做一个比较蛋疼的布局，类似于window xp桌面图片布局方式，而且要求尽量不要用嵌入js脚本，用纯div+css布局，在不断探索和摸索下也只现实了IE8+,firfox, chrome浏览器，别的不多说，直接上代码。

 1   2   3   4   5  window xp桌面图标布局  6   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  31  32  33 34     
1

      
查看更多关于div+css实现windowxp桌面图标布局（至上而下从左往右）_html/css_WEB-ITn的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did102788

更新时间：2022-11-17 阅读：34次