Організація мініатюр в галерею за допомогою CSS

60

Пропоную коротенький фрагмент коду CSS, за допомогою якого ви легко зможете вибудувати зображення мініатюр струнку сітку, звичний всім макет галереї.

Для розміщення мініатюр, використовуємо простий ненумерованний список

    , який в залежності від розміру картинок, буде автоматом вибудовуватися в ідеально розкреслену сітку, з рівними відступами між кожною картинкою.

    HTML

    У прикладі додав легку тінь, що з’являється в картинок в момент наведення на них, опція, як ви розумієте, не обов’язкова))).

    CSS

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    li img {
    float: left;
    margin: 10px;
    border: 5px solid #fff;
    width: 100px;
    height: 100px;
    }

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    li img {
    float: left;
    margin: 10px;
    border: 5px solid #fff;
    width: 100px;
    height: 100px;
    }

    З Повагою, Андрій .

    Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: