复制代码
代码如下:
<!DOCTY PE ht ML P ub LIC "-//W3C//DTD XHTML 1.0 Trans IT ional//EN" "http://HdhCmsTestw3. org /TR/xhtml1/DTD/xhtml1 -t ransitional.dtd">
<html XM lns="http://HdhCmsTestw3.org/1999/xhtml">
<head>
< ;m eta charset="utf-8"/>
<title>window xp 桌面图标 布局</title>
<style>
html,body{ m arg in:0; border:0; padding:0; width:100%; h ei ght:100%; }
.parent{ dis play :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 -s pace:nowra p; }
.child{
display:inline-block;
*display:inline;
mar gin :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实现类似winxp桌面图标布局(至上而下从左往右) 全部内容，希望文章能够帮你解决 div+css实现类似winxp桌面图标布局(至上而下从左往右) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于div+css实现类似winxp桌面图标布局(至上而下从左往右)的详细内容...