Проблемы с CSS позиционированием панелей - PullRequest
Новая
       8

Проблемы с CSS позиционированием панелей

4 голосов
/ 09 ноября 2011

Я уже несколько недель пытаюсь сделать этот макет, но я просто не могу понять, как это вообще получается!

layout example

Так что, если нет особых проблем, может кто-нибудь попытаться получить мне ссылку или что-то в этом роде, чтобы я мог продолжить работу с моим сайтом.

1 Ответ

11 голосов
/ 09 ноября 2011

Вот шаг в (надеемся) правильном направлении.

Демо

Некоторые очень важные вещи, которые следует иметь здесь в виду:

позиционированиеОсновы

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

использовать значения переменных (проценты)

Кроме того, вы хотите расположить элементы в процентах, чтобы их можно было изменить в размере и обеспечить центрирование.Вы можете присвоить элементу% ширины или высоты, и это будет% ширины или еще чего-то его первого нестатического родителя.

расположение элементов

Затем вы можете расположить элементына основе процентных значений, используя свойства left и top.Слева для позиции: абсолютные элементы указывают «некоторое значение от левого края первого нестатического родителя».Аналогично для top, bottom и right.

центрирование элемента

для позиционирования элемента с абсолютным позиционированием в середине его первого нестатического родителя, вы задаете ему левое значение 50% и максимальное значение 50%.(50% ширины родителей от левого края этого родителя и 50% его высоты сверху).Это поместит верхний левый угол элемента посередине к родителю.чтобы полностью отцентрировать элемент, нужно сместить его на половину его ширины и высоты.Для этого вы можете использовать margin-left и margin-right с отрицательными значениями.

С этого момента вы можете просто настраивать по мере необходимости, как я делал в предоставленной демонстрации.Изучите код (также вставленный ниже для дальнейшего использования) и посмотрите, как элементы расположены и какие свойства используются.

HTML 

<div class="container">

    <div class="block tl"></div>
    <div class="block t"></div>
    <div class="block tr"></div>
    <div class="block l"></div>
    <div class="center"></div>
    <div class="block r"></div>
    <div class="block bl"></div>
    <div class="block b"></div>
    <div class="block br"></div>

</div>

CSS 

.container
{
    width: 300px;
    height: 300px;
    position:relative;
    margin:100px;
}

.block, .center
{
    width:25%;
    height:25%;
    background:#5aa;
    border-radius:10px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-12%;
    margin-top:-12%;
}

.center
{
    width:30%;
    height:30%;
    margin-left:-15%;
    margin-top:-15%;
}

.center
{
    border-radius:100%;
}

.tl
{
    left:20%;
    top:20%;
}
.tr
{
    left:80%;
    top:20%;
}
.br
{
    left:80%;
    top:80%;
}
.bl
{
    left:20%;
    top:80%;
}
.t
{
    top:10%;
}
.r
{
    left:90%;
}
.b
{
    top:90%;
}
.l
{
    left:10%;
}
...