我创建了一个类似于
Microsoft Metro UI的简单,轻量级GUI.它由一组浮动元素组成,可根据屏幕大小灵活调整大小：
这是代码：
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index2</title>
<style type="text/css">
.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;}
</style>
</style>
</head>
<body>
<div class="tiles clearfix">
<div class="w4 h2">
mattberg@live.com <div class="icon">icon</div>
</div>
<div class="w4 h2">
RSS
</div>
<div class="w4 h2">
13
</div>
<div class="w2 h2">
IE
</div>
<div class="w2 h2">
Photo
</div>
<div class="w4 h2">
Now Playing
</div>
<div class="w4 h2">
Photo <div class="icon">icon</div>
</div>
<div class="w2 h2">
Shop
</div>
<div class="w2 h2">
SMS
</div>
<div class="w4 h2">
Weather <div class="icon">icon</div>
</div>
<div class="w4 h2">
Investment
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
<div class="w1 h1">
Lilly
</div>
</div>
</body>
</html>
我在div中定位图标元素时遇到问题.这就是我所拥有的：
这就是我想要的：
换句话说,我希望能够绝对地将元素放置在平铺的div元素中.我尝试了各种CSS定位技术(相对,固定,绝对)但无法解决它.我怀疑是因为瓷砖是浮动元素？
我怎样才能设计每个瓷砖的内容,无论它在网页中的位置如何？
解决方法
使瓷砖div相对定位,图标绝对定位.
.tiles > div {
float: left;
position: relative;
}
.tiles > div .icon {
position: absolute;
bottom: 0;
left: 0
}
通过相对定位,对于其绝对定位的子项,tile div变为containing block.当顶部和左侧为零或未定义时,相对元素定位为just like正常(静态)元素.