کیسے قیام: مساوی سٹون

سی ایس ایس کا استعمال کرکے مساوی سٹون کا قیام سیکھنے کا راستہ.

مساوی سٹون کا قیام کیسے کریں

آپ کی سٹون جب پارا پارا دکھائی دیجائی ہوتی ہیں تو، آپ جو چاہتے ہیں کہ وہ مساوی اونچائی والی ہو ( سب سے بلندی کی اونچائی کے مطابق).

خود شخصی طور پر کوشش کریں

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

<div class="کول-کنٹینر">
  <div class="کول">
    <h2>کول 1</h2>
    <p>هیلو ورلڈ</p>
  </div>
  <div class="کول">
    <h2>کول 2</h2>
    <p>هیلو ورلڈ!</p>
    <p>هیلو ورلڈ!</p>
    <p>هیلو ورلڈ!</p>
    <p>هیلو ورلڈ!</p>
  </div>
  <div class="کول">
    <h2>کول 3</h2>
    <p>کچھ دوسرے متن..</p>
    <p>کچھ دوسرے متن..</p>
  </div>
</div>

دوسری قدم - سی ایس ایس اضافہ کریں:

.کول-کنٹینر {
  دکھائی دیجائی: ٹیبل; /* کنٹینر آئیٹم کو ٹیبل کی طرح دیکھائی دیجائی */
  کامر: 100%; /* پورا چوڑائی مقرر کریں تاکہ پورا پینل پیمانہ پوری پینل کو پوری پینل کی طرح دیکھائی دیجائی */
}
.کول {
  دکھائی دیجائی: ٹیبل-سل; /* کنٹینر کے اندر آئیٹم کو ٹیبل سل کی طرح دیکھائی دیجائی */
}

خود شخصی طور پر کوشش کریں

جوابی مساوی اونچائی

ماں مثال میں بنائی گئی سٹون جوابی ہیں ( اگر آپ کوشش کرتے ہیں تو آپ دیکھ سکتے ہیں کہ وہ خودکار طور پر درکار چوڑائی اور اونچائی کے مطابق تنظیم ہوتی ہیں). لیکن، اگر آپ چھوٹی اسکرین (جیسے موبائل فون) کیلئے چاہتے ہیں تو وہ افقی طور پر نہیں بلکہ عمودی طور پر پھینا دیجائی:

اس مقصد کے لئے ایک میڈیا کوئری اضافہ کریں، اور اس کیلئے ایک بریک پوائنٹ پیکسلس مقرر کریں:

مثال

/* اگر بروزر کا ونڈوز 600 پیکسل سے کم ہو تو سٹون کو پھینا دیجائی */
@media only screen and (max-width: 600px) {
  .کول {
    دکھائی دیجائی: بلوک;
    کامر: 100%;
  }
}

خود شخصی طور پر کوشش کریں

فلیکس بیکس کا استعمال کرکے مساوی اونچائی اور چوڑائی حاصل کریں

آپ فلیکس بیکس کا استعمال کرکے مساوی اونچائی والی فلیکس بیکس بناسکتے ہیں:

مثال

.کول-کنٹینر {
  دکھائی دیجائی: فلیکس;
  کامر: 100%;
}
.کول {
  فلیکس: 1;
  پیدائش: 16پیکسلس;
}

خود شخصی طور پر کوشش کریں

توجہ:آئی اینٹرنیٹ ایکسپلورر 10 اور اس کے پچھلے ورژن فلیکس باکس کو نہیں مدعوم کرتا.

مربوط ویب سائٹ

تعلیم:CSS Flexbox