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

前端技术 2023/09/09 CSS
前不就公司项目要求做一个比较蛋疼的布局，类似于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>

本文地址：https://www.stayed.cn/item/25809

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案