如何在類似城市的Web GUI中定位圖標？（包含圖像）

我創建了一個簡單，重量輕的GUI，類似於Microsoft Metro UI。它由一組其是浮動使其根據屏幕的大小靈活重新相當大的元素組成： enter image description here 如何在類似城市的Web 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"> 
    [email protected] <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中。這是我有：

enter image description here

，這就是我想要的東西：

enter image description here

換句話說，我希望能夠在平鋪的div元素絕對元素的位置。我嘗試了各種CSS定位技術（相對，固定，絕對），但無法解決它。我懷疑這是因爲瓷磚浮動元素？

我怎樣才能夠設計每個瓷磚的內容，而不管它在網頁中的位置？

來源

2012-02-24 AlexStack

+1爲澄清圖片！ – jholster 2012-02-24 14:08:01

同意！一個奇妙解釋的問題的一個很好的例子。 – 2012-03-19 06:20:08

@AlexStack你是我的英雄。我可以用這個代碼嗎？ – 2012-08-28 17:29:44

使瓷磚相對定位和圖標絕對定位。

.tiles > div { 
    float: left; 
    position: relative; 
} 

.tiles > div .icon { 
    position: absolute; 
    bottom: 0; 
    left: 0 
}

隨着相對定位的瓷磚格成爲其絕對定位的孩子containing block。當頂部和左側爲零或未定義時，相對元素位於just like正常（靜態）元素。

來源

2012-02-24 12:33:50 jholster

如何在類似城市的Web GUI中定位圖標？ （包含圖像）

回答

相關問題

如何在類似城市的Web GUI中定位圖標？（包含圖像）