LINUX.ORG.RU

Сетка дивами

 , , ,


0

1

Добрый день. Есть интересная задачка... Есть объект «сетка». У этого объекта есть свойства rows[100px,50%,50%,200px] и colums[250px,50%,50%,300px]. Это ширины и высоты строк в сетке.

Есть массив объектов(будут представлены div-ами) у которых есть свойства row - указывает строку в которую надо поставить блок, col - указывает колонку в которую надо поставить блок, rowspan - указывает сколько строк занимает(на сколько строк растягивается) блок и colspan - указывает сколько колонок занимает(на сколько колонок растягивается) блок.

Вопрос: как реализовать корректное расположение блоков внутри сетки? Не могу придумать алгоритм, который учитывал бы все возможные варианты.

Вот такое должно нарисоваться, для примера http://i66.tinypic.com/125kh92.png

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

reprimand ★★★★★
()

если не таблица, то display: table-cell и т.д.

можно конечно как то извратиться с фиксированной высотой традиционных обтекаемых дивов (с понятными ограничениями). тут сложность только с rowspan'ом, но с помощью overflow-y: visible и пустых дивов-заполнителей такое реально сделать. так же можно попробовать flex - почти все браузеры его уже поддерживают

идеальное решение - задействовать grid, но поддержка браузерами оставляет желать лучшего

eternal_sorrow ★★★★★
()
Ответ на: комментарий от zz

Есть готовый Drag&Drop, который рассчитан на блоки.

TikName
() автор топика
Ответ на: комментарий от eternal_sorrow

Спасибо. Наверно будет table-cell... Если не придумаю что-то получше. Сложно одновременно сделать rowspan и colspan :(

TikName
() автор топика

Забудь про таблицы вообще. Делай обертку с позишн релатив. Делай дивы в ней абсолютно позиционированными, каждый с стилем а-ля:

{
    width: (rowwidth*rowsize)%/px;
    height: (colheight*colsize)%/px;
    top: (colheight*coloffset)%/px;
    left: (rowwidth*rowoffset)%/px;
}
и не парь себе и людям мозг.

А если нужны фигуры посложнее чем ровные четырехугольники — значит canvas или svg-path.

deep-purple ★★★★★
()
Последнее исправление: deep-purple (всего исправлений: 1)
Ответ на: комментарий от deep-purple

Круто, кажется это прикольный вариант :)

TikName
() автор топика
Ответ на: комментарий от TikName

Натянуть шаблон в HTML5, который умеет в отзывчивость, и воспользоваться делением страницы на блоки. Тогда ничего ломаться не будет (по идее)

bookman900 ★★★★★
()
Ответ на: комментарий от bookman900

Либо я чего-то недопонимаю, либо этот вариант не катит :(

TikName
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.