چگونه تصاویر را در کنار یکدیگر قرار دهیم

آموزش نحوه استفاده از CSS برای قرار دادن تصاویر در کنار یکدیگر.

چگونه تصاویر را کنار هم قرار دهیم

مرحله اول - اضافه کردن HTML:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

مرحله دوم - اضافه کردن CSS:

چگونه از CSS استفاده کنیم شناور ویژگی‌های ایجاد تصاویر کنار هم:

مثال شناور

/* سه قالب تصویر (چهار قالب تصویر استفاده می‌کند 25%，دو قالب تصویر استفاده می‌کند 50%，و غیره) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* پاکسازی شناور پس از قالب تصویر */
.row::after {
  content: "";
  clear: both;
  display: table;
}

آزمایش کنید

چگونه از CSS استفاده کنیم flex ویژگی‌های ایجاد تصاویر کنار هم:

مثال انعطاف‌پذیر

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

آزمایش کنید

توجه:Flexbox از نسخه‌های 10 و قبل از آن Internet Explorer پشتیبانی نمی‌کند. استفاده از float یا flex برای ایجاد سه ستون به انتخاب خود شما بستگی دارد. اما اگر نیاز به پشتیبانی از نسخه‌های 10 و قبل از آن دارید، باید از float استفاده کنید.

نکته:برای اطلاعات بیشتر در مورد ماژول پیکربندی انعطاف‌پذیر، لطفاً تدریس CSS Flexbox。

افزودن پاسخگویی

یا می‌توانید یک جستجوی رسانه‌ها اضافه کنید تا تصاویر در عرض صفحه خاصی به صورت عمودی قرار گیرند و نه کنار هم.

در اینجا یک مثال آورده شده است که تصاویر را در صفحه‌ای با عرض 500 پیکسل یا کمتر به صورت عمودی قرار می‌دهد:

مثال پاسخگو

/* پیکربندی پاسخگو - سه ستون را به جای کنار هم قرار می‌دهد */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

آزمایش کنید

برای اطلاعات بیشتر در مورد جستجوی رسانه‌ها، لطفاً تدریس CSS برای جستجوی رسانه‌ها。

صفحات مرتبط

تدریس:CSS تصاویر

تدریس:CSS پلورینگ

تدریس:CSS کتابخانه تصاویر