div+css实现类似winxp桌面图标布局(至上而下从左往右)

时间：2021-05-08

前不就公司项目要求做一个比较蛋疼的布局，类似于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; }
.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; }
</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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章