div+css实现类似winxp桌面图标布局(至上而下从左往右)
div+css实现类似winxp桌面图标布局(至上而下从左往右)
发布时间:2016-12-27 来源:查字典编辑
摘要:前不就公司项目要求做一个比较蛋疼的布局,类似于windowxp桌面图片布局方式,而且要求尽量不要用嵌入js脚本,用纯div+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>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<div>7</div>

<div>8</div>

<div>9</div>

<div>10</div>

<div>11</div>

<div>12</div>

<div>13</div>

<div>14</div>

<div>15</div>

<div>16</div>

<div>17</div>

<div>18</div>

<div>19</div>

<div>20</div>

<div>21</div>

<div>22</div>

<div>23</div>

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类