ПРОЦЕНТНАЯ СЕТОЧНАЯ СИСТЕМА


ПРОЦЕНТНАЯ СЕТОЧНАЯ СИСТЕМА


Главной характеристикой этой сеточной схемы является задание ширины колонок в процентах. То есть вам не нужно будет определять ширину каждой колонки вручную, просто поместите её в любой контейнер и ширина колонок автоматически установится.

Данная схема поддерживает до 6 равных по ширине колонок, так что можно выбрать набор состоящий из 2-х до 6 колонок. В каждом наборе колонок можно соответсвенно дополнительно сделать ещё строки состоящие из колонок. Размер отступа между колонками 2% для каждого набора, так что если у вас различные наборы колонок в одном контейнере у вас все равно расстояние между ними будет одинаковое.

Обзовем наши колонки и контейнеры их содержащие.
Контейнеры в которых находятся наши колонки будут иметь класс cols (множ.число), а сами колонки col (ед. число).
Вот такой код получается:
<div class="cols">
    <div class="col first"></div>
    <div class="col"></div>
</div>


...и может использоваться для создания двух равных колонок. Обратите внимание на название класса first. Мы используем его для удаление margin-left (левого поля) для первой колонки. (наряду с псевдо селектором :first-child)

Если нам нужно больше двух наборов колонок, то нам нужно будет изменить название класса контейнера на colsX, где Х - число колонок в наборе. Вот такой пример:
<div class="cols cols4">
    <div class="col first"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>


Если нам нужно сделать колонку шириной, например, в две или три обычных колонки, то название класса можно сделать таким colX, где Х - это число определяющее ширину колонки (т.е., например, в 2 раза шире обычной колонки). Вот пример из 5 колонок, где вторая колонка имеет двойную ширину.
<div class="cols cols5">
    <div class="col first"></div>
    <div class="col col2"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>


Можно настроить и значение полей вокруг содержимого в каждой колонке, т.е. padding.
Например добавим по 1% отступа для контента с каждой стороны внутри каждой колонки. Слева padding 1% и справа padding 1%, т.е. нам нужно уменьшить ширину колонки на 2%, вместо 49% сделать 47%. То есть придется вручную настроить ширину каждой колонки.

Скачать исходник:
easy_grid.rar


скрипт скрипт ПРОЦЕНТНАЯ СЕТОЧНАЯ СИСТЕМА
Atlantis-Tv
BestNews
ITEMPLATE
GreenDew
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 2515
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация