Как разместить значок в похожем на метро веб-интерфейсе?(изображения включены) - PullRequest
Новая
       1

Как разместить значок в похожем на метро веб-интерфейсе?(изображения включены)

7 голосов
/ 24 февраля 2012

Я создал простой, легкий графический интерфейс, похожий на Microsoft Metro UI . Он состоит из набора элементов, которые плавающие , чтобы сделать его гибко изменяемым в зависимости от размера экрана: enter image description here

Вот код: 

<!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. Вот что у меня есть:

enter image description here

и вот что я хочу:

enter image description here

Другими словами, я хочу иметь возможность размещать элементы в мозаичных элементах div абсолютно. Я пробовал различные методы позиционирования CSS (относительное, фиксированное, абсолютное), но не смог решить. Я подозреваю, что это потому, что плитки - это плавающие элементы?

Как я могу создавать содержимое каждой плитки независимо от ее положения на веб-странице?

1 Ответ

7 голосов
/ 24 февраля 2012

Сделать элементы мозаичного изображения относительно позиционированными, а значки - абсолютно позиционированными. 

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

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

При относительном позиционировании элемент мозаичного изображения становится содержащим блок для его дочерних элементов с абсолютным позиционированием.Относительные элементы располагаются точно так же, как нормальные (статические) элементы, когда top и left равны нулю или не определены.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...