اس مضمون میں، ہم ذکر کردہ طریقوں میں سے ہر ایک پر ایک ایک کرکے بحث کریں گے اور ہر طریقہ کی ایک مناسب مثال فراہم کریں گے۔
تو، آئیے شروع کریں!
طریقہ 1: گرڈ کا استعمال کرتے ہوئے سی ایس ایس میں دو حصوں کو ساتھ ساتھ رکھیں
سی ایس ایس ' گرڈ لے آؤٹ صارف کو دو یا دو سے زیادہ دو divs ساتھ ساتھ رکھنے کی اجازت دیتا ہے۔ بنیادی طور پر، گرڈ ڈسپلے پراپرٹی کی ایک قدر ہے جو قطاروں اور کالموں پر مشتمل ایک ترتیب بنانے کے لیے استعمال ہوتی ہے۔
نحو
گرڈ لے آؤٹ کے ساتھ ڈسپلے پراپرٹی کا نحو ذیل میں دیا گیا ہے:
ڈسپلے: گرڈ
اب، آئیے گرڈ لے آؤٹ کا استعمال کرتے ہوئے CSS میں دو divs کو ساتھ ساتھ رکھنے سے متعلق ایک مثال دیکھیں۔
مثال
یہاں، ہم پیرنٹ ڈیو کے اندر دو چائلڈ ڈیو بنائیں گے، جس کے کلاس کے نام ہوں گے ' والدین '،' بچہ 'اور' بچہ ”:
< div کلاس = 'والدین' >< div کلاس = 'بچہ' >< / div >
< div کلاس = 'بچہ' >< / div >
< / div >
سی ایس ایس سیکشن میں اگلا، استعمال کریں ' .والدین پیرنٹ ڈیو تک رسائی حاصل کرنے اور ڈسپلے پراپرٹی کی قدر کو بطور سیٹ کریں۔ گرڈ ' اگلا، 'کا استعمال کرتے ہوئے کسر کو سیٹ کریں grid-template-colums کالم کے لیے جگہ بنانے کے لیے پراپرٹی۔ ہمارے معاملے میں، ہم حصوں کو ' کے طور پر مقرر کریں گے 1fr 'اور' 1fr ”، جس کا مطلب ہے کہ دونوں divs نے مساوی جگہ حاصل کر لی ہے۔ مزید برآں، ہم کالم-گیپ پراپرٹی کا استعمال کرتے ہوئے دو کالموں کے درمیان خلا کو سیٹ کریں گے اور اس کی قدر کو 'کے طور پر سیٹ کریں گے۔ 25px '
CSS:
.والدین {ڈسپلے : گرڈ ;
grid-template-colums : 1fr 1fr ;
کالم-گیپ : 25px ;
}
اگلے مرحلے میں، ہم استعمال کرتے ہیں ' .بچہ دونوں چائلڈ ڈیو تک رسائی حاصل کرنے اور div کی اونچائی کو بطور سیٹ کریں 250px اور پس منظر کا رنگ بطور سیٹ کریں rgb(253, 5, 109) ”:
.بچہ {اونچائی : 250px ;
پس منظر : آر جی بی ( 253 ، 5 ، 109 ) ;
}
یہ مندرجہ ذیل نتیجہ دکھائے گا:
آئیے div کو ساتھ ساتھ رکھنے کے لیے دوسرے طریقے پر چلتے ہیں۔
طریقہ 2: فلیکس کا استعمال کرتے ہوئے سی ایس ایس میں دو حصوں کو ساتھ ساتھ رکھیں
' فلیکس ” ڈسپلے پراپرٹی کی قدر ہے جو دو divs کو ساتھ ساتھ رکھنے کی اجازت دیتی ہے۔ یہ خاصیت لچکدار شے کے لیے لچکدار لمبائی سیٹ کرنے کے لیے استعمال ہوتی ہے۔ یہ اپنے کنٹینر میں فٹ ہونے کے لیے فلیکس شے کو سکڑتا یا بڑھاتا ہے۔
نحو
فلیکس کے ساتھ ڈسپلے پراپرٹی کا نحو ذیل میں دیا گیا ہے:
ڈسپلے: فلیکس؛آئیے بیان کردہ تصور کو سمجھنے کے لیے مثال کی طرف چلتے ہیں۔
مثال
ہم اسی HTML فائل پر غور کریں گے اور لاگو کریں گے ' فلیکس پیرنٹ کنٹینر پر۔ یہاں، ہم ڈسپلے پراپرٹی کی قدر کو فلیکس کے طور پر سیٹ کریں گے اور چائلڈ divs کے درمیان فرق کو ' 10px ”:
.والدین {ڈسپلے : فلیکس ;
خلا : 10px ;
}
اس کے بعد، div کی چوڑائی، اونچائی اور پس منظر کا رنگ سیٹ کریں ' 650px '،' 200px '، اور آر جی بی (0، 255، 42) '، بالترتیب:
.بچہ {چوڑائی : 650px ;
اونچائی : 200px ;
پس منظر : آر جی بی ( 0 ، 255 ، 42 ) ;
}
دیئے گئے کوڈ کا نتیجہ ذیل میں دیا گیا ہے:
طریقہ 3: فلوٹ کا استعمال کرتے ہوئے سی ایس ایس میں دو حصوں کو ساتھ ساتھ رکھیں
سی ایس ایس فلوٹ پراپرٹی کسی عنصر کی تیرتی سمت کی وضاحت کرتی ہے۔ مزید خاص طور پر، اس پراپرٹی کو CSS میں ساتھ ساتھ دو divs رکھنے کے لیے استعمال کیا جا سکتا ہے۔
نحو
فلوٹ پراپرٹی کا نحو یہ ہے:
فلوٹ: کوئی نہیں | بائیں | دائیںمندرجہ بالا اقدار کی تفصیل یہ ہے:
- کوئی نہیں: یہ تیرنے کو محدود کرنے کے لیے استعمال ہوتا ہے۔
- بائیں: یہ بائیں جانب عناصر کو تیرنے کے لیے استعمال کیا جاتا ہے۔
- حق: یہ عناصر کو دائیں جانب تیرنے کے لیے استعمال کیا جاتا ہے۔
آئیے div کو ساتھ ساتھ رکھنے کی مثال کی طرف چلتے ہیں۔
مثال
اب، ہم
ٹیگ کے اندر دو divs بنائیں گے اور کلاس کا نام تفویض کریں گے ' div1 'اور' div2 ”: < جسم >< div کلاس = 'div1' >< / div >
< div کلاس = 'div2' >< / div >
< / جسم >
پھر، استعمال کریں ' .div1 'اور' .div2 HTML سیکشن میں شامل کنٹینرز تک رسائی حاصل کرنے کے لیے۔ ہم دونوں divs کو ایک ہی کلاس میں استعمال کریں گے کیونکہ جو خصوصیات اور اقدار ہم دونوں کو تفویض کرنے جا رہے ہیں وہ ایک جیسی ہیں۔
اگلا، ہم فلوٹ پراپرٹی کی قدر تفویض کرتے ہیں ' بائیں اور div کی چوڑائی اور اونچائی کو بطور سیٹ کریں پچاس٪ 'اور' 40% ' ہم باکس سائزنگ پراپرٹی بھی استعمال کرتے ہیں اور اس کی قدر کو ' بارڈر باکس ' مزید برآں، div کے پس منظر کا رنگ سیٹ کریں ' rgb(7, 255, 222) اور بارڈر پراپرٹی کی قدریں بطور سیٹ کریں 3px '،' ٹھوس '، اور ' rgb(255, 0, 255) ”:
.div1 ، .div2 {تیرنا : بائیں ;
چوڑائی : پچاس٪ ;
اونچائی : 40% ;
باکس کا سائز : بارڈر باکس ;
پس منظر : آر جی بی ( 7 ، 255 ، 222 ) ;
سرحد : 3px ٹھوس آر جی بی ( 255 ، 0 ، 255 ) ;
}
نوٹ: آپ divs کے مختلف پس منظر کے رنگوں کو ترتیب دے کر باکس سائزنگ پراپرٹی اور بارڈر پراپرٹی کا استعمال کیے بغیر دو divs کو ساتھ ساتھ رکھ سکتے ہیں۔
ایک بار جب آپ مندرجہ بالا کوڈ کو لاگو کرتے ہیں، تو HTML فائل کو عمل میں لاتا ہے اور نتیجہ دیکھیں:
نوٹ: دو divs کے درمیان خلا پیدا کرنے کے لیے، پہلے ایک اور div بنائیں اور پھر اس کے مطابق div کا مارجن سیٹ کریں۔
نتیجہ
سی ایس ایس کے تین مختلف طریقے استعمال کرکے Divs کو ساتھ ساتھ رکھا جا سکتا ہے، جو کہ ' فلیکس 'اور' گرڈ 'ڈسپلے پراپرٹی کی اقدار اور' تیرنا ' جائیداد. طریقوں میں سے ہر ایک مؤثر طریقے سے کام کرتا ہے؛ تاہم، آپ ہماری ضروریات کے مطابق ان میں سے کسی کو بھی استعمال کر سکتے ہیں۔ اس گائیڈ میں، ہم نے CSS کا استعمال کرتے ہوئے div کو ساتھ ساتھ رکھنے کے تین طریقوں پر تبادلہ خیال کیا ہے اور متعلقہ مثالیں فراہم کی ہیں۔