it-swarm.com.ru

Макет плитки с использованием CSS и HTML

Не полагаясь на таблицы, что было бы хорошим решением для создания макета плитки, такого как этот: tile layout это автоматически адаптируется к размеру экрана пользователя. То есть весь экран должен быть заполнен плитками, независимо от высоты и разрешения.

Я ценю любые идеи.

Роберт

17
orschiro

Вот рабочий пример: jsfiddle

Html:

<div class="container">
<div class="first">first</div><div class="third">third</div>
<div class="second">second</div><div class="fourth">fourth</div><div class="last">last</div>
</div>​

CSS:

html, body, .container
{
    height: 100%; 
    min-height: 100%;
}

.first {
    float: left;
    width: 20%;
    height: 30%;
    background-color: red;
}

.second{
    float: left;
    width: 20%;
    height: 70%;
    background-color: green;
}


.third{
    float: right;
    width: 80%;
    height: 80%;
    background-color: blue;
}

.fourth {
    float: right;
    width: 40%;
    height: 20%;
    background-color: #DDDDDD;
}

.last{
    float: right;
    width: 40%;
    height: 20%;
    background-color: yellow;
}

14
Marian Ban

Я бы пошел с некоторыми div, используя абсолютное позиционирование . И укажите для каждой плитки ширину/высоту/верх/лево с помощью единицы %.

2
Py.

Подсказка:

  • Используйте «содержимое div» со 100% ширины и высоты
  • Используйте в «div содержимого» два div: один для левого столбца и один для правого. Не забудьте указать эти «%» измерения (также для «content» div)
  • Помните, что плавающий правый div должен идтиПЕРЕДлевым плавающим div

С этими тремя пунктами вы сможете попробовать себя.

1
DonCallisto

Отказ от ответственности

Это не будет означать потребности вашего проекта. На этот вопрос уже ответили другие пользователи.


Для дальнейшего использования я рассмотрю oocss-подход к классам макетов. У вас могут быть страницы с разным количеством плиток и т.д. Я использую следующее для своих проектов.

Плитка Объект

Используется для создания макетов плитки.

css

.tiles
{
    display: block;
}

.tiles__item
{
    display: block;

    height: auto;

    float:left;
}

.tiles--2
{
    margin-left: -4%;
}

.tiles--3
{
   margin-left: -2%;
}

.tiles--4
{
    margin-left: -2%;
}

.tiles--2 .tiles__item
{
    margin-left: 4%;

    width: 46%;
}

.tiles--3 .tiles__item
{
    margin-left: 2%;

    width: 31.3%;
}

.tiles--4 .tiles__item
{
    margin-left: 2%;

    width: 23%;
}

html

<div class="tiles tiles--2">

    <div class="tiles__item">

    </div>

    <div class="tiles__item">

    </div>

</div>

Док-объект

Пристыковывает контент к краю экрана.

css

.dock 
{
    position: absolute;

    height: auto; 

    width: auto;
}

.dock--t
{
    width: 100%;

    top: 0;
}

.dock--b
{
    width: 100%;

    bottom: 0;
}

.dock--l
{
    height: 100%;

    left: 0;
}

.dock--r
{
    height: 100%;

    right: 0;
}

html

<div class="dock dock--t">

    The content will be docked to the top of the screen.

</div?

Другие

Я бы посмотрел на объект Tiles в Metro UI Framework. Они позволяют для высоты

http://metroui.org.ua/

Если вы ищете хорошую систему макетов, которая использует пропорции:

https://github.com/stubbornella/oocss/wiki/Grids

0
Eric Harms