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

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

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

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

Как сделать обе колонки одного размера

Эта проблема решается несколькими способами: можно применить метод на основе одного лишь CSS, либо сделать это при помощи Javascript’а. В данном учебнике колонки одинакового размера будут созданы с помощью трех методов CSS и одного метода jQuery. В демо примере видно, как колонки одного размера создаются разными техниками.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Демопример

Относительно расположенный упаковщик

Методом относительно расположенного упаковщика колонки располагаются внутри DIV’а-упаковщика, а затем можно применить к этому DIV’у-упаковщику position: relative. Затем добавить к колонкам position: absolute, установив top: 0, что поместит колонки поверх упаковщика, и установить bottom: 0, отчего они обе окажутся во всю высоту div’а-упаковщика.

Из-за position: absolute нельзя воспользоваться margin для создания отступов между разными колонками, поэтому нам придется применить ко второй колонке свойство left.

Решение проблемы с помощью таблиц CSS

Метод таблиц CSS определяет DIV’ы HTML как таблицу, которая заставит браузер отображать эти элементы в точности так, как они повели бы себя с таблицей HTML. HTML для этой цели может быть в точности таким же, как для относительно расположенного упаковщика: у него имеется DIV-упаковщик с двумя колонками внутри.

Чтобы создать их как таблицу CSS, нужно определить как таблицу DIV-упаковщик; добиться этого можно свойством display со значением table. Далее нам требуется определить колонки как ячейки внутри таблицы, это снова делается с помощью свойства display, на этот раз со значением table-cell. Потом нам остается всего-навсегозаявить, что размер колонок составляет 100% размера таблицы.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Решение проблемы с помощью таблиц HTML

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

Решение проблемы с помощью jQuery

Решение на основе jQuery может вам показаться не самым чистым и красивым, но у него имеется реальное преимущество – не приходится менять ранее созданные HTML и CSS. HTML здесь означает, что у нас окажется просто две заполненные контентом колонки.

В этом решении CSS всего лишь определяет стили DIV’а, делая его определенной ширины с помощью margin, создающих вид колонок.

Далее нам требуется создать функцию jQuery, которая изменит размер колонок таким образом, чтобы те стали одинаковой высоты. Следующая функция проведет поиск по всем колонкам и получит высоту самой длинной из них. Затем эту высоту можно сохранить в переменной и поменять колонки так, чтобы они стали равными этой высоте.

Источник: http://www.paulund.co.uk/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

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

Получить

Метки: ,

Похожие статьи:

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

Комментарии Facebook:

Комментарии (4)

  1. Андрей

    Я решил эту проблему при помощи css:

    table {
    width: 100%; /* Ширина таблицы */
    }
    td {
    padding: 1px; /* Поля в ячейках */
    vertical-align: top; /* Выравнивание по верхнему краю ячеек */
    }

    Все получилось очень просто autoschool-moscow.ru/bita-v-avtomobile.html все колонки таблицы вытянулись по верху, вернее выровнялись.

  2. Александр

    Здравствуйте! Скажите пожалуйста, как реализовать пример на JQ. Не совсем понятно. что передавать сюда:
    functionresize_elements( selector )? Селектор который нужно изменить? Следовательно нужно на JQ, например имя селектора, сохранять в переменную и отправлять в эту функцию. Так понимаю? А как потом вызвать эту функцию? Сделал так: onload=»resize_elements(this.className);» Не работает, при этом ошибок никаких не выдаёт. и у Вас в примере в 5 строчке ошибка (var отдельно нужно).

    • Андрей Кудлай

      Здравствуйте, Александр.
      В функцию достаточно передать тот элемент, для которого функция написана, т.е. колонки — .column:
      resize_elements($('.column'));
      Вызвать функцию можно в тегах script, там же, где эта функция описана.
      Замеченную вами ошибку и еще одну (при объявлении функции) поправили, спасибо за внимательность :)

  3. Александр

    Так заработало

    var selector = «.chiave_parole»;
    resize_elements(selector);

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree