@H_502_1@我创建了一个类似于
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正常(静态)元素.