كيفية تقريب الصور بالموازاة

تعلم كيفية تقريب الصور باستخدام CSS.

كيفية ترتيب الصور بشكل متوازي

الخطوة الأولى - إضافة HTML:

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

الخطوة الثانية - إضافة CSS:

كيفية استخدام CSS الفيديو خصائص إنشاء الصور المتراصة:

مثال الفواصل

/* ثلاثة صناديق للصور (أربعة صناديق للصور باستخدام 25%، صناديق اثنتان باستخدام 50%، إلخ) */
.column {
  浮动: اليسار;
  عرض: 33.33%;
  ملء: 5px;
}
/* تنظيف الفائض بعد صندوق الصور */
.row::after {
  محتوى: "";
  تنظيف: كلاهما;
  عرض: جدول;
}

تجربة شخصية

كيفية استخدام CSS مرونة خصائص إنشاء الصور المتراصة:

مثال مرونة الصندوق

.row {
  عرض: مرونة;
}
.column {
  مرونة: 33.33%;
  ملء: 5px;
}

تجربة شخصية

ملاحظة:Flexbox لا يدعم متصفح Internet Explorer 10 وأقدم. يرجى استخدام float أو flex لإنشاء تصميم ثلاثي الأعمدة يعتمد على رغبتك. ولكن إذا كنت بحاجة إلى دعم IE10 وأقدم، يجب عليك استخدام float.

نصيحة:للحصول على معلومات إضافية حول وحدة التخطيط المرونة، يرجى قراءة دليل تعليمي CSS Flexbox.

إضافة المرونة

أو يمكنك إضافة استعلام وسائطي لترتيب الصور بشكل عمودي عند عرض شاشة معينة بدلاً من التوزيع الجانبي.

السطر التالي سيقوم بترتيب الصور بشكل عمودي عند عرض شاشة عرض 500px أو أقل:

مثال ردوي

/* تصميم ردوي - يجعل الثلاثة أعمدة تتراكم بدلاً من التوزيع الجانبي */
@media screen and (حد الأقصى: 500px) {
  .column {
    عرض: 100%;
  }
}

تجربة شخصية

للحصول على معلومات إضافية حول الاستعلامات الوسائطية، يرجى قراءة دليل تعليمي CSS لتحقيق الاستعلامات الوسائطية.

الصفحات ذات الصلة

دليل تعليمي:CSS صورة

دليل تعليمي:CSS مرونة

دليل تعليمي:مكتبة الصور CSS