Задать вопрос

Как сверстать нестандартное размещение блоков?

В общем, есть такое расположение блоков.
09208728c9524d8a942211f26bfe6a25.png
уже 2 дня сижу ломаю голову, как же правильно все это дело верстать?
Итак, логика блоков - чтобы все блоки равнялись на левый верхний угол. Количество блоков может быть 5, а может и 20. Ширина родителя неизвестна.
Итак, вопрос. Как мне его правильно сверстать ?

На одной станице их может быть 5, а на другой 15, а на третий вообще 25, нужно сложить алгоритм, чтобы при любом количестве блоки нормально выстроились.

Решение: Обошлись только 25 блоками, и так есть 2 варианта:
1. C абсолютным позиционированием,- codepen.io/catcode/pen/JIaoD
2. C использованием float, и добавление к ним clear,- codepen.io/catcode/pen/bAvGs
  • Вопрос задан
  • 2579 просмотров
Подписаться 4 Оценить 1 комментарий
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
1. Количество блоков может быть любым - Вы пишете. Оно может быть 16? В данном примере их 15 и они красиво собираются в угол, если будет 16 - внизу появляется две строки по одному блоку.
2. Опишите все данные, откуда берется количество, можно ли использовать сервер, или надо решить на клиенте. Вообще, можно ли использовать js.

Ответ без указанных данных очевиден, один из вариантов уже привели: с помощью css очищать обтекание, или делать inline-block и распределять по строкам. Сделать это можно или на сервере исходя из количества блоков, или на клиенте. Также можно при верстке или на сервере ставить метки (теми же data-атрибутами) и потом на клиенте сортировать.

upd:
Советую использовать абсолютное позиционирование в блоке. Определять координаты надо по такой вот закономерности:
1	1	1

2	1	2
3	2	1

4	1	3
5	2	2
6	3	1

7	1	4
8	2	3
9	3	2
10	4	1

11	1	5
12	2	4
13	3	3
14	4	2
15	5	1

16	2	5
17	3	4
18	4	3
19	5	2

20	3	5
21	4	4
22	5	3

23	4	5
24	5	4

25	5	5


первый столбик - номер блока. Далее номер строки и номер столбца. Соответственно, циклом пробегать все элементы, которые есть, и в зависимости от индекса элемента назначать ему координаты.
Пропусками строк я отделил группы. Если присмотритесь - закономерность просматривается. Исходить надо из количества блоков и ограничение квадрата пять на пять. Добить данный алгоритм я могу, но не на бесплатной основе и не скоро, так как занят. Задача интересная, но нет времени. Надеюсь, без обид. Возможно найдутся другие помощники здесь.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Zoxon
@Zoxon
Веб-разработчик
jsfiddle.net/Zoxon/A9Yzj

Если js онли то вариант собственно 1 абсолютом, и распихиваем по местам.
Кстати числа 1, 3, 6, 10, 15, 21 ничего не напоминают?
ru.wikipedia.org/wiki/%D0%A4%D0%B8%D0%B3%D1%83%D1%...
ru.wikipedia.org/wiki/%D0%A2%D1%80%D0%B5%D1%83%D0%...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы