Матвей Земсков

Заметки веб-мастера

Понедельник, 14 сентября 2015 11:38

Выравниваем высоту блоков с помощью Right-height

Оцените материал
(1 Голосовать)

В процессе верстки макета довольно часто возникает ситуация, когда нужно разместить в ряд несколько блоков с содержимым (текстом, изображениями и тп). Как правило контент в эти блоки размещается динамически, его количество разное и высота блоков, получается тоже разная. В результате на странице это выглядит неаккуратно и некрасиво, сразу появляется желание все это выровнять. К сожалению, средствами HTML и CSS это сделать не получится.

В такой ситуации на помощь верстальщику «приходят» различные инструменты на JavaScript. Большинство из подобных инструментов работают совместно с библиотекой jQuery, но есть и независимые от нее скрипты. Недавно я нашел один из них. Этот скрипт называется Right-height. На мой взгляд — очень полезная и достойная вещь. Он небольшой (в сжатом виде «весит» всего 1 кБ), не зависит от jQuery, прост в использовании. Работает во всех современных браузерах, в IE, начиная с версии 9.

Что же нужно сделать, чтобы использовать Right-height на своем сайте? Для начала его нужно скачать с GitHub, разархивировать и подключить к страничкам своего сайта.

Обратите внимание: разметка блоков, у которых нужно выровнять высоту, должна содержать определенные атрибуты. По-умолчанию, в код «родительского» блока нужно добавить атрибут data-right-height, а у блокам с содержимым атрибут data-right-height-content.

Чтобы активировать работу инструмента Right-height, нужно добавить пару строк кода:

JavaScript

<script>
  window.onload = function(){
     rightHeight.init();
  } 
</script>

Вы можете изменить имена атрибутов, которые необходимо добавлять блокам с содержимым. Просто передайте значение двух свойств (selector и selectorContent) в метод rightHeight.init.

В общем, в использовании инструмента Right-height ничего сложного.

Я создал небольшую страничку для демонстрации работы Right-height. Ознакомиться с ней можно здесь.

Прочитано 1301 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: