كيفية إنشاء: شبكة الصور الديناميكية

تعلم كيفية إنشاء شبكة الصور الديناميكية.

إنشاء شبكة الصور

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

<div class="row">
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
</div>

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

إنشاء تصميم ديناميكي باستخدام CSS Flexbox:

.row {
  عرض: flex;
  التدوير الحر: wrap;
  ملء: 0 4px;
}
/* إنشاء أربعة أعمدة متوازية متساوية */
.column {
  التوسع: 25%;
  عرض أقصى: 25%;
  ملء: 0 4px;
}
.column img {
  边际 اعلى: 8px;
  توجيه عمودي: منتصف;
  عرض: 100%;
}
/* تصميم ديناميكي للشاشة - إعداد تصميم الأعمدة بدلاً من أربعة أعمدة */
@media screen and (عرض أقصى: 800px) {
  .column {
    التوسع: 50%;
    عرض أقصى: 50%;
  }
}
/* تصميم ديناميكي للشاشة - تجمع الأعمدة معًا بدلاً من التشابك */
@media screen and (عرض أقصى: 600px) {
  .column {
    التوسع: 100%;
    عرض أقصى: 100%;
  }
}

جربها بنفسك

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

دليل:CSS Flexbox

دليل:كيفية إنشاء شبكة الصور