Как найти размер границ в пикселях вложенных прямоугольных div'ов?

Question

[diasflack]

Существуют произвольные прямоугольные div'ы, вложенные в произвольный прямоугольный div. Требуется найти размер(в пикселях) смежных границ div'ов, исключая границы с оболочным div.

пример 1


пример 2

Comments

[Юрий Лобанов]

Вы на примерах по цветам можете сказать, что нужно найти? Это что у Вас, задача практическая или домашнее задание?

[diasflack]

@iiil

практическая задача.
Допустим, пример 1. В общей сложности 8 блоков.

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

Мне нужно найти длину вертикальных и горизонтальных перегородок.

Допустим, высота красного и синего блока - 100 пикселей, следовательно перегородка между ними высотой в 100 пикселей.

Но блоков в ряд может и три и четыре, вертикально и горизонтально.

Answer 1

[Миша Васильев]

Если я все правильно посчитал, то сумма ширин всех блоков + сумма высот всех блоков - периметр контейнера даст нужный результат.

Comments

[Миша Васильев]

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

[diasflack]

Ага, похоже, что верно. Я тоже сейчас просчитал, что полупериметр. Спасибо =)

Answer 2

[Юрий Лобанов]

Данную конструкцию можно сверстать разными способами. Отсюда будут разные алгоритмы нахождения перегородок. И еще поясните - будут ли считаться общие с тремя блоками границы, скажем, на первой картинке между (красным+синим) и желтым.
В первом случае можно выделить 6 строк, две строки разбиты на два столбца равной ширины.
Во втором - 3 столбца, два разбиты на 2 строки, причем высота строк разная.
Возможен еще и третий вариант (возможен?), когда столбец в первой строке первого варианта сам разбит на строки и столбцы.
Короче, может Вы опишите в чем состоит практическая задача? И возможно есть более простое решение, потому что пока что решения в общем виде я не вижу.

Comments

[diasflack]

Блоки верстаются абсолютным позиционированием по top и left

Да, это общая граница, то есть граница между первым рядом(красный+синий блок) и вторым(желтый блок) является суммой ширины красного и синего блока, либо шириной желтого блока.

Практическая задача состоит в просчете стоимости двери шкафа. Блоки - это рамки двери, в каждую из которых может быть встроено изображение. Сама рамка просчитывается по стоимости профиля, причем стоимость профиля по краям двери и стоимость профиля-делителя различны, собственно границы. Вот и нужно узнать длину профиля - делителя.

[Юрий Лобанов]

@diasflack ну так все же понятнее стало. Обязательно подумаю над задачей, возможно тут стоит смотреть немного в другую сторону, в сторону периметров прямоугольников.
Еще вопрос - как формируется дверь? Нельзя подсчитывать нужные длины по мере формирования данного прямоугольника?

[diasflack]

В админке есть конструктор дверей. По результатам его работы в базу данных записывается массив, в котором хранятся top, left, width, height каждой рамки.

На клиенте из этого массива формируются дивы с соответсвующими значениями банальным циклом for...