Наверное каждый верстальщик, хотя бы раз в жизни сталкивался с версткой двух- или трех-колоночного макета. Хотя, сам макет сверстать несложно, если конечно колонки не различаются цветом фона, как например на хабре. А вот с разноцветными придется помучаться, потому что они имеют свойство тянуться по содержимому, а содержимое у соседних колонок, как правило, разной высоты.
Мне известны два способа решения этой проблемы:
— заключить обе колонки в контейнер, и поставить в фон двухцветную картинку;
— выставить колонкам одновременно вниз отрицательный марджин и положительный паддинг.
Оба способа имеют свои достоинства и недостатки, но сегодня я хочу рассказать выравнивании колонок с помощью плагина к JQuery — Flexify.
Flexify позволяет создавать полностраничные, подвижные слои в веб приложении, проще говоря, вы сможете выровнять нужные вам элементы на странице по высоте и ширине, назначать вертикальную или горизонтальную раскладку дочерних элементов блока, создавать строки и столбцы из элементов.
Flexify добавляет к Jquery функции flow() и flex(), после установки необходимых значений, нужно вызвать функцию: $(document).flexify().
Функция flow в качестве единственного аргумента принимает значения: 'vertical' или 'horizontal', эти значения определяют как именно будут растягиваться дочерние элементы. К примеру, приведенный ниже код, заставит все элементы, содержащиеся в html и body, раскладываться горизонтально:
Функция flex принимает два аргумента: значение растягивания и коэффициент. Значение растягивания — то что мы собираемся тянуть, например: margin-*, padding-*, border-*, width, height, соответственно для позиционированных элементов: top, right, bottom, и left. Коэффициент растягивания — любое целое число больше 0, обычно 1.
Для того чтобы выровнять три колонки по высоте достаточно написать:
Как видно, пользоваться им достаточно просто и удобно. Плагин можно скачать отсюда, а ниже примеры его использования:
Три колонки, выровнены по высоте
Центрированный блок с тянущимися полями и рамками
Абсолютно позиционированный блок
Мне известны два способа решения этой проблемы:
— заключить обе колонки в контейнер, и поставить в фон двухцветную картинку;
— выставить колонкам одновременно вниз отрицательный марджин и положительный паддинг.
Оба способа имеют свои достоинства и недостатки, но сегодня я хочу рассказать выравнивании колонок с помощью плагина к JQuery — Flexify.
Flexify позволяет создавать полностраничные, подвижные слои в веб приложении, проще говоря, вы сможете выровнять нужные вам элементы на странице по высоте и ширине, назначать вертикальную или горизонтальную раскладку дочерних элементов блока, создавать строки и столбцы из элементов.
Flexify добавляет к Jquery функции flow() и flex(), после установки необходимых значений, нужно вызвать функцию: $(document).flexify().
Функция flow в качестве единственного аргумента принимает значения: 'vertical' или 'horizontal', эти значения определяют как именно будут растягиваться дочерние элементы. К примеру, приведенный ниже код, заставит все элементы, содержащиеся в html и body, раскладываться горизонтально:
$(function () {
$('html, body').flow('horizontal');
$(document).flexify();
});Функция flex принимает два аргумента: значение растягивания и коэффициент. Значение растягивания — то что мы собираемся тянуть, например: margin-*, padding-*, border-*, width, height, соответственно для позиционированных элементов: top, right, bottom, и left. Коэффициент растягивания — любое целое число больше 0, обычно 1.
Для того чтобы выровнять три колонки по высоте достаточно написать:
$(function () {
$('#content, #sidebar, #sidebar2').flex('height', 1);
$(document).flexify();
});Как видно, пользоваться им достаточно просто и удобно. Плагин можно скачать отсюда, а ниже примеры его использования:
Три колонки, выровнены по высоте
Центрированный блок с тянущимися полями и рамками
Абсолютно позиционированный блок
