Плитка с CSS и HTML
Не полагаясь на таблицы, что было бы хорошим решением для выполнения компоновки плитки, например:
, которая автоматически адаптируется к размеру экрана пользователя. То есть весь экран должен быть заполнен плитками, независимо от того, с чем и высота разрешения.
Я ценю любые идеи.
~ Роберт
Ответы
Ответ 1
Вот рабочий пример:
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;
}
Ответ 2
Я бы пошел с некоторым div
, используя абсолютное позиционирование. И укажите для каждой плитки ширину/высоту/верхнюю/левую часть с помощью %
.
Ответ 3
Подсказка:
- Используйте "content div" со 100% ширины и высоты
- Используйте в "div div" два div: один для левого столбца и один для правильного. Не забудьте указать значение "%" (также для "content" div)
- Помните, что плавающий правый div должен прибыть ПЕРЕД левой плавающей div
С этими тремя моментами вы сможете попробовать себя.
Ответ 4
Отказ
Это не будет означать потребности вашего проекта. На это ответили другие запросы.
В будущем, я бы рассмотрел 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