تصاویر کو ساتھ میکھنے کا طریقہ.

سمجھتا کس طرح سے سی ایس ایس کا استعمال کرنا پتہ چلائیں اور تصاویر کو ساتھ میکھائیں.

تصاویر کو کس طرح ساتھ ساتھ بنائیں؟

پہلا قدم - ایچ تی ایم ایل شامل کریں:

<div class="روو">
  <div class="کولمن">
    <img src="img_snow.jpg" alt="Snow" style="وائڈتھ:100%">
  </div>
  <div class="کولمن">
    <img src="img_forest.jpg" alt="Forest" style="وائڈتھ:100%">
  </div>
  <div class="کولمن">
    <img src="img_mountains.jpg" alt="Mountains" style="وائڈتھ:100%">
  </div>
</div>

دوسرا قدم - سی ایس ایس شامل کریں:

کیوں سی ایس ایس کا استعمال کریں؟ فلوٹ سازگار تصاویر بنانے والی خصوصیات:

فلوٹ مثال

/* تین تصویر کی جگہ (چار تصویر کی جگہ 25%，دو تصویر کی جگہ 50%，اور اس طرح سے) */
.کولمن {
  فلوٹ: لائفٹ;
  وائڈتھ: 33.33%;
  پینڈنگ: 5 پیکسل;
}
/* تصویر کی جگہ کے بعد کا فلوٹ ختم کرنا */
.روو:: بعد {
  کنٹینٹ: "";
  کلیر: بہت;
  ڈسپلے: تیبل;
}

آپ خود کا تجربہ کریں

کیوں سی ایس ایس کا استعمال کریں؟ فلیکس سازگار تصاویر بنانے والی خصوصیات:

فلیکس بیکس مثال

.روو {
  ڈسپلے: فلیکس;
}
.کولمن {
  فلیکس: 33.33%;
  پینڈنگ: 5 پیکسل;
}

آپ خود کا تجربہ کریں

توجہ:فلیکس بیکس انٹرنیٹ ایکسپلورر 10 اور اس سے پچھلے ورژنز کو مدد نہیں دیتا۔ تین کلومیں بنانے کے لئے فلوٹ یا فلیکس کا استعمال کرسکتے ہیں یا نہیں، خود کو بنا دیتا ہے۔ لیکن اگر آپ کو آئی ای 10 اور اس سے کم کی مدد چاہیئے، تو آپ کو فلوٹ استعمال کرسکتے ہیں。

نکات:فلیکس بیکس لائحہ عمل کے بارے میں مزید معلومات حاصل کرنے کے لئے، ہمارا سی ایس ایس فلیکس باکس تدریس。

ریسپانسیو بنائیں

یا، آپ میں میڈیا کوئری شامل کرسکتے ہیں، تاکہ تصاویر کسی معین عرض کا اسکرین پر پتلی پتلی بنیں اور ساتھ ساتھ نہ بنیں。

ایک مثال، تصاویر کو 500px یا اس سے کم کی عرض کا اسکرین پر عمودی طرح پتلی پتلی بنائیں گا:

ریسپانسیو مثال

/* ریسپانسیو بولت - تین کلومیں ساتھ ساتھ کی جگہ پر پتلی پتلی بنائیں */
@میڈیا سکرین اور (مکس وائڈتھ: 500px) {
  .کولمن {
    وائڈتھ: 100%;
  }
}

آپ خود کا تجربہ کریں

میڈیا کوئری کے بارے میں مزید معلومات حاصل کرنے کے لئے، ہمارا سی ایس ایس میڈیا کوئری کا تدریس。

مربوط صفحات

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

تدریس:سی ایس ایس فلاٹ

تدریس:كاتالوگ تصوير CSS