Пропорционально двигать DIV-ы
| июля 7, 2008Задача: пропорционально менять горизонтальное положение блочных элементов при изменении размера окна.
Решение: термин “пропорциональность” подразумевает линейную зависимость двух параметров. Вспоминаем школьный курс геометрии: линейная зависимость - это прямая, её уравнение выглядит следующим образом: Y=aX+b. Для построения уравнения прямой необходимо и достаточно знать координаты двух точек, принадлежащих этой прямой. Если принять за Y горизонтальное положение блока, а за X - ширину окна, то задача сводится к определению параметров a и b.
Итак, предположим, что у нас есть два варианта макета странички, первый шириной 1000 пикс., второй - 1600 пикс. На первом макете некий синий блок размещён на расстоянии 100 пикс. от левого края окна, а на втором - на 250 пикс. См. рис.
Нужно построить линейную зависимость положения DIV-а от ширины окна браузера. Пусть X1=100, X2=250 - положения DIV, а Y1=1000, Y2=1600 - ширина окна. Немного погуглив и замарав пару листов А4, вспомнил школьный курс и вывел формулу для нахождения значений a и b:
a = (X2-X1)/(Y2-Y1) = (250-100)/(1600-1000) = 150/600 = 0,25
b = X1-a*Y1 = 100-0,25*1000 = -150
Таким образом, уравнение нашей частной прямой приобрело следующий вид: Y=0,25*X-150
Как мы можем это использовать? Лично я делаю так: у абсолютно спозиционированного DIV-а я задаю параметр left в процентах, равный a*100, и смещение margin-left, равное b. То есть в нашем примере стиль блока будет такой:
2
3
4
5
6
7
8
9
10
width: 100px;
height: 100px;
background: blue;
/*и ниже пошло самое главное*/
position: absolute;
left: 25%; /*это значение a, умноженное на 100*/
margin-left: -150px; /*корректировочное смещение, в нашем частном случае получилось отрицательным*/
top: 30px; /*требуемое положение блока по вертикали*/
}
Работающий пример можно посмотреть тут: http://e1.nnov.ru/rezina.html
А ещё можно скачать xls-файл, облегчающий расчёты.
