Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » jQuery: Колонки с одинаковой высотой
jQuery: Колонки с одинаковой высотой
cechДата: Понедельник, 19.07.2010, 09:22 | Сообщение # 1
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Создание колонок равной высоты, используя элементы div, связано с некоторыми проблемами. Обычно такой эффект реализуется с помощью фоновых изображений. Однако, данный метод лишь создаёт иллюзию равной высоты у колонок и имеет определённые минусы. В качестве альтернативы этому методу можно использовать javascript и популярный фреймворк jQuery.





Допустим, необходимо сделать три колонки одинаковой высоты.


Code
<div class="column news">
    …
</div>
<div class="column articles">
    …
</div>
<div class="column contacts">
    …
</div>



Предварительно сделаем их «плавающими», а ширину каждой колонки сделаем равной 1/3 ширины окна.


Code
.column{
     float:left;
     width:33%
}
.news{
     background:#4B2185
}
.articles{
     background:#DC85DE
}
.contacts{
     background:#C43959;
     width:34%
}



Добавим файл библиотеки и небольшой код:


Code
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
function equalHeight(group) {
     tallest = 0;
     group.each(function() {
         thisHeight = $(this).height();
         if(thisHeight > tallest) {
         tallest = thisHeight;
         }
     });
     group.height(tallest);
}
$(document).ready(function() {
     equalHeight($(".column"));
});
</script>



Параметром функции "equalHeight" является класс элементов, которым необходимо сделать одинаковую высоту.
Конечно это не панацея и данный метод также имеет свои минусы, но как ещё один вариант решения проблемы, вполне имеет право на жизнь.



 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » jQuery: Колонки с одинаковой высотой
  • Страница 1 из 1
  • 1
Поиск: