白云岛资源网 Design By www.pvray.com
前不就公司项目要求做一个比较蛋疼的布局，类似于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>
复制代码代码如下:
<!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>
白云岛资源网 Design By www.pvray.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
白云岛资源网 Design By www.pvray.com
暂无评论...
