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

35

Организация миниатюр в галерею с помощью CSS

Пропоную коротенький фрагмент коду 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 та поділіться посиланням на запис в своїх соціальних мережах: