Часто встречается ситуация, когда некий контейнер "набивается" 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);
});
