آموزش قرار دادن چند تصویر در کنار هم در سایت

در این مقاله یاد می‌گیرید چطور با استفاده از CSS و HTML تصاویر را به‌صورت حرفه‌ای و زیبا در کنار یکدیگر قرار دهید. ما دو روش محبوب، یعنی Flexbox و Float را به شما معرفی می‌کنیم و در نهایت نحوه واکنش‌گرا (Responsive) کردن تصاویر را آموزش می‌دهیم.

قدم اول: کد HTML را اضافه کنید

ابتدا، ساختار HTML را تنظیم می‌کنیم. کد زیر سه تصویر را در کنار هم قرار می‌دهد:

قدم دوم: کد CSS را اضافه کنید

روش اول: استفاده از Float

در این روش از ویژگی float برای قرار دادن تصاویر کنار یکدیگر استفاده می‌کنیم.

* {
    box-sizing: border-box;
}

.column {
    float: left;
    width: 33.33%;
    padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}

خروجی با روش Floate به شکل زیر می باشد:

روش دوم: استفاده از Flexbox

Flexbox یک مدل چیدمان مدرن است که انعطاف‌پذیری بیشتری برای تنظیم آیتم‌ها فراهم می‌کند.

* {
    box-sizing: border-box;
}

.row {
    display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
    flex: 33.33%;
    padding: 5px;
}

خروجی با روش Flexbox هم به شکل زیر می باشد:

استفاده از Media Query برای Responsive سازی

با استفاده از Media Query می‌توان تصاویر را در صفحه‌نمایش‌های کوچکتر به‌صورت عمودی چیدمان کرد. مثال زیر نشان می‌دهد چگونه این کار انجام می‌شود

/* Media Query برای صفحات کوچک‌تر از 500 پیکسل */@media screen and (max-width: 500px) {
    .column {
        width: 100%;
    }
}

یادگیری برنامه نویسی ، یکبار برای همیشه

آموزشگاه برنامه نویسی تحلیل داده برگزار کننده انواع دوره های آموزش برنامه نویسی ، با بهره گیری از اساتید مجرب و منابع آموزشی به‌روز، شما را در مسیری هموار به سوی موفقیت هدایت می‌کند.

برای دریافت مشاوره برنامه نویسی و اطلاع از دوره ها با ما در ارتباط باشید !