Як розмітки будемо використовувати списки. У кожен елемент li помістимо картинку товару і його опис. Фото навмисне взяті різних розмірів. Як правило, при наповненні сайту адміністратор рідко замислюється про те, що картинки варто оптимізувати і заливає їх на сайт як є. Нашим завданням буде відцентрувати картинки і зробити все блоки однакової висоти.
Додамо стилі оформлення. Детально на них я зупинятися не буду - тут, як то кажуть, кожен може застосувати те, що вважає за потрібне.
Тепер зайдемо на сторінку і подивимося, що ж у нас вийшло. Якщо з фото все більш менш пристойно, то з самими блоками картина неприваблива. Напишемо невеликий скрипт, який дозволить легко усунути цю проблему.
Зберігаємося, перенавантажуємо сторінку і милуємося виконаною роботою. Всі блоки взяли однакову висоту.
Тепер трохи докладніше, чого ми тут написали. Оголошуємо змінну maxH і присвоюємо їй значення 0. Далі вибираємо всі елементи li в каталозі і проходимся по ним в циклі за допомогою функції each. У тілі циклу ми оголошуємо ще одну змінну h_block в якій зберігаємо значення висоти кожного елемента li. округленого до цілого числа за допомогою функції parseInt. Все в тому ж циклі задаємо умову - якщо значення поточного блоку більше, ніж значення у змінній maxH. то присвоюємо останньої це значення. Іншими словами - ми перевіряємо висоту кожного блоку і найбільшу висоту зберігаємо в змінну maxH. І, нарешті, пройшовшись по всіх li і обчисливши найбільшу висоту, ми присвоюємо її всім блокам (рядок $ ( "li"). Height (maxH);).
Однак, цей спосіб має недолік. Припустимо, в один з блоків адміністратор додав занадто багато тексту. Застосувавши, описаний вище метод, ми вирівняємо всі блоки за найвищим і отримаємо дуже багато вільного простору знизу в інших.
Виправити таку ситуацію повністю не можна (якщо тільки не зменшити обсяг тексту в проблемної лишком), а ось звести недолік до мінімуму цілком можливо.
Перепишемо скрипт. Як і в перший раз, він буде вирівнювати блоки за найвищим, але робити це стане трохи розумніші. Ми навчимо його вважати кількість li в кожному ряду і вирівнювати їх по самому високому в ряду а не за найвищим на сторінці.
Ось власне і все. Який з методів застосувати, вирішувати потрібно по ситуації, але в будь-якому випадку - другий спосіб більш універсальний.