Колонки одинаковой высоты

Как отключить ревизии в WordPressОчень часто, при верстке сайтов, возникает необходимость создать колонки одинаковой высоты, т.е. независимо от того, сколько контента содержится в каждом блоке, все эти блоки должны равномерно растягиваться по вертикали и иметь равную высоту.

При табличной верстке, это сделать очень легко. Нам просто нужно создать таблицу с двумя или более колонками и все они автоматически будут иметь одинаковую высоту.

Но с блочной версткой не все так просто. Ведь высота блока зависит от контента расположенного в нем. Поэтому, чтобы добиться требуемого результата, приходится искать всевозможные решения.

Цель, которой нам следует добиться, приведена на изображении ниже.

Как сделать колонки одинаковой высоты

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

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

Смотреть видеоурок

В данном уроке я разобрал наиболее частые способы:

Способ 1 – Использование JavaScript

Способ 2 – Использование свойства display: table

Способ 3 – Использование padding + margin + overflow

Разумеется существуют и другие, более экзотические способы, но на мой взгляд у многих из них есть куча недостатков. Например, в некоторых случаях приходится изменять HTML-разметку, что естественно усложнить читабельность кода или приходится применяется дополнительное изображение в качестве фоновой картинки, что также не является хорошим способом.

В любом случае, как вы поняли, отличного решения, которое на 100% избавит от проблемы – нет, поэтому приходится выбирать наиболее оптимальное из того что есть.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

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

Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад