메트로와 비슷한 웹 GUI에 아이콘을 배치하는 방법은 무엇입니까? (이미지 포함)

Microsoft Metro UI과 비슷한 간단한 GUI를 만들었습니다. 그것은 그것을 유연하게 다시 상당한 스크린의 크기에 따라 만들어 부동적인 요소의 집합으로 구성되어메트로와 비슷한 웹 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>

I은 문제가있다 : 여기 enter image description here

하면 코드 아이콘 요소를 div에 배치합니다. 이것은 내가 무엇을 가지고 :

enter image description here

를이 내가 원하는 것입니다 : 즉

enter image description here

내가 절대적으로 타일 DIV 요소의 요소를 배치 할 수 있어야합니다. 나는 다양한 CSS 포지셔닝 기법 (상대, 고정, 절대)을 시도했지만 해결할 수 없었다. 타일이 부동 요소가 있기 때문에 그것이 용의자가?

웹 페이지의 위치에 관계없이 각 타일의 내용을 어떻게 디자인 할 수 있습니까?

출처

2012-02-24 AlexStack

+1 사진을 명확하게합니다! – jholster

가 동의합니다! 훌륭하게 설명 된 질문의 훌륭한 예입니다. –

@AlexStack 당신은 내 영웅입니다. 이 코드를 사용해 주시겠습니까? –

타일 div를 상대적으로 배치하고 아이콘을 절대적으로 배치합니다.

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

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

상대적 위치 지정을 통해 타일 div는 절대 위치 지정된 하위에 대해 containing block이됩니다. 상단이이고 이 0 일 때 상대 요소는 just like 정상 (정적) 요소로 지정됩니다.은 0이거나 정의되지 않습니다.

출처

2012-02-24 12:33:50 jholster

메트로와 비슷한 웹 GUI에 아이콘을 배치하는 방법은 무엇입니까? (이미지 포함)

답변

관련 문제