html 绘制定位图标,html5 – 如何在类似地铁的Web GUI中定位图标？ (包括图像)

我创建了一个类似于

Microsoft Metro UI的简单,轻量级GUI.它由一组浮动元素组成,可根据屏幕大小灵活调整大小：

这是代码：

Index2

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

html{

font-family:Verdana, Geneva, sans-serif;

font-size:14px;

}

div.tiles{

background-color:black;

padding:50px;

}

div.tiles div{

border-radius:2px;

padding:10px;

margin:5px;

color:white;

background-color:#666;

display:marker;

cursor:pointer;

float:left;

width:25px;

height:25px;

}

div.tiles div:hover{

transition:background-color 1s;

-moz-transition:background-color 1s;

-webkit-transition:background-color 1s;

background-color:#060;

-moz-transform:rotate(6deg);

}

div.tiles div.icon{

position:relative;

bottom:0px;

left:0px;

z-index:10;

background-color:red;

}

div.tiles div.w1{width:25px;}

div.tiles div.w2{width:80px;}

div.tiles div.w3{width:160px;}

div.tiles div.w4{width:190px;}

div.tiles div.h1{height:25px;}

div.tiles div.h2{height:80px;}

div.tiles div.h3{height:160px;}

div.tiles div.h4{height:190px;}

mattberg@live.com

icon

RSS

13

IE

Photo

Now Playing

Photo

icon

Shop

SMS

Weather

icon

Investment

Lilly

Lilly

Lilly

Lilly

Lilly

Lilly

Lilly

我在div中定位图标元素时遇到问题.这就是我所拥有的：

这就是我想要的：

换句话说,我希望能够绝对地将元素放置在平铺的div元素中.我尝试了各种CSS定位技术(相对,固定,绝对)但无法解决它.我怀疑是因为瓷砖是浮动元素？

我怎样才能设计每个瓷砖的内容,无论它在网页中的位置如何？