четверг, 18 июля 2013 г.

Классическая проблема верстки - выравнивание блоков

Часто встречается ситуация, когда некий контейнер "набивается" float-ом дочерними элементами . На макете все красиво и ровно. На практике, после того как начинается работа с реальным контентом (например содержимое категории товаров в магазине), то однотипные блоки получаются разными по высоте. Проблему можно решить принудительным транкейтом содержимого, подбором "максимальной" фиксированной высоты или javascript-ом. Пример кода, решающего подобную проблему (используется jQuery):

//делаем высоту всех .thumbnail одинаковой
   var  max_height = 0;
 $('.thumbnail').each(function(){
    h = $(this).height();
   if(h > max_height){
     max_height = h;
    };
   });
 $('.thumbnail').css('height',max_height);

Этот код хорошо отработает , например , в IE, а вот Chrome могут быть проблемы, если в .thumnail внутри есть изображение. На момент вычисления height оно еще может быть не загруженным и поэтому полученные величины height и width могут очень удивить верстальщика :) Поэтому код надо модифицировать , например, вот так:

$(document).ready(function(){
//делаем высоту всех .thumbnail одинаковой только после полной загрузки всей страницы
   var  max_height = 0;
 $('.thumbnail').each(function(){
    h = $(this).height();
   if(h > max_height){
     max_height = h;
    };
   });
 $('.thumbnail').css('height',max_height);
});

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

Отправить комментарий

Если Вы нашли ошибку у автора, у Вас есть вопрос или просто хотите поделиться чем-то полезным, то пишите - не стесняйтесь..