سی ایس ایس ڈسپلے پراپرٹی کو سمجھنا

مواد

• اوپر والی نازک چیزیں
• صفائی سے بھری ٹی شرٹس
• وہ جرابیں جو خلا کو پُر کرتی ہیں
• تمہارا سفر خوش گاوار گزرے

آدھی رات ہے ، اور وہ ایک ہے تقسیم آپ کی سائٹ پر ابھی بھی کسی بچے کا کھلونا سینہ لگتا ہے۔ سبھی عناصر ایک گڑبڑ ہیں ، اور جب بھی آپ سی ایس ایس کے ساتھ کھیلتے ہیں ڈسپلے پراپرٹی ، وہ خود کو بالکل مختلف قسم کی بکواس میں دوبارہ ترتیب دیتے ہیں۔

اگر آپ مجھ جیسے ہیں تو ، آپ شاید اپنی سانسوں کے تحت بدلاؤ کرکے اور اپنے کی بورڈ کے ساتھ مستقل طور پر زیادہ جارحانہ ہو کر اسے حل کریں گے۔ اور اگرچہ اس حکمت عملی نے پہلے بھی میرے لئے کام کیا ہے ، میں نے حال ہی میں اس بات کو سمجھنے کا ایک بہتر طریقہ تلاش کرنے کے لئے نکلا ہے ڈسپلے پراپرٹی

اس کی بنیادی باتوں کا پتہ چلتا ہے ڈسپلے اس سے کہیں زیادہ آسان ہیں جن کے بارے میں میں نے سوچا تھا۔ در حقیقت ، وہ وہی اصول استعمال کرتے ہیں جیسے سوٹ کیس پیک کرنا۔ میں احاطہ کرنے جا رہا ہوں ڈسپلے: بلاک, ان لائن بلاک اور لائن میں. اگر آپ نے پہلے ترتیب سے سوٹ کیس کا اہتمام کیا ہے تو آپ کو متوازی نظر آئے گا۔ اگر آپ اس طرح کے فرد ہیں جو آپ کے لباس کو بھیڑ بکریوں سے بھرا ہوا ہے - ٹھیک ہے ، تو میں آپ کے لئے صرف اتنا ہی کرسکتا ہوں۔

ہمارے سوٹ کیس میں تین طرح کے لباس ہوں گے:

• تیار شدہ قمیض کی طرح کھا جاتا ہے
• ٹی شرٹس جو رول اپ ہوسکتی ہیں
• موزے یا انڈرویئر جو خلاء میں بھرے جاسکتے ہیں

حوالہ کے لئے ، اگر ہم ایچ ٹی ایم ایل میں سوٹ کیس ماڈل کرتے ہیں تو ، یہ اس طرح نظر آئے گا:

ڈوی کلاس = 'سوٹ کیس'> ڈوی کلاس = 'نازک' </ div> ڈوی کلاس = 'ٹی شرٹ' </ div> ڈوی کلاس = 'ٹی شرٹ' </ div> ڈوی کلاس = 'ٹی شرٹ' </ div> ڈوی کلاس = 'tshirt' </ div> div class = 'جرابوں' </ div> Div Class = 'tshirt'> </ div> Div Class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt' </ div> / div>

اوپر والی نازک چیزیں

ڈسپلے: بلاک زیادہ تر HTML عناصر کے لئے پہلے سے طے شدہ ہے۔ اس کا مطلب ہے کہ عنصر اپنے کنٹینر میں پوری افقی جگہ پر قابض ہے تقسیم. اگر یہ دوسرے بہن بھائیوں کے عناصر کے برابر ہے تو ، یہ ایک نئی لائن شروع کردے گی ، اور دوسرے عناصر کو اپنی لائن پر جانے کی اجازت نہیں دے گی۔ یہ ایسی ہی نازک اشیاء کی طرح ہے جو آپ اپنے اٹیچی کے اوپر رکھتے ہیں۔ یہ نازک یا ہوشیار مضامین ہیں جیسے کولیڈ شرٹس۔ آپ نہیں چاہتے کہ وہ جھریوں کا شکار ہو ، لہذا آپ کو یقینی بنانا ہے کہ وہ لباس کے دوسرے ٹکڑوں کے خلاف دباؤ نہیں ڈال رہے ہیں۔

اس میں سے ایک مشکل حص partsہ سامنے آتا ہے ڈسپلے: بلاک. ملاحظہ کریں کہ کالریڈ قمیض سوٹ کیس کی پوری چوڑائی پر کس طرح قبضہ نہیں کرتی ہے؟ اس کا مطلب یہ نہیں ہے کہ دوسری اشیاء اس کی سطح تک کود پڑے گی۔ ہم کہتے ہیں کہ یہ قمیص سوٹ کیس کی چوڑائی کا 60 فیصد ہے۔ اس کے باوجود بھی دوسرے عناصر کو اعلی سطح پر اس میں شامل ہونے سے روکیں گے۔

اسی وجہ سے تصویر میں اورینج بارڈر ہے۔ A ڈسپلے: بلاک اگر یہ پوری افقی جگہ پر قابض نہیں ہوتا ہے تو عنصر خود بخود اس کے ارد گرد حاشیہ جوڑ دے گا۔

صفائی سے بھری ٹی شرٹس

آپ کے سفر کے ل your آپ کا زیادہ تر سوٹ کیس آپ کے باقی لباس سے بھرا ہوا ہے۔ سادگی کی خاطر ، ہم اسے صرف ٹی شرٹس میں کاٹ رہے ہیں۔ انٹرنیٹ پر ایک بڑی بحث ہے کہ فولڈنگ یا رولنگ زیادہ موثر ہے یا نہیں۔ میں ایک تہ کرنے والا شخص ہوں۔

بہرحال ، زیادہ تر اشیاء کو فٹ کرنے کے ل you ، آپ اپنی ٹی شرٹس کو شانہ بہ شانہ رکھتے ہیں۔ بالکل یہی ہے ڈسپلے: ان لائن بلاک کے لئے ہے یہ عناصر ایک دوسرے کے ساتھ ساتھ اسی لائن پر بیٹھ سکتے ہیں ڈسپلے: ان لائن عناصر.

نا پسند ڈسپلے: ان لائن عناصر ، ایک ان لائن بلاک عنصر اگلی لائن میں چلا جائے گا اگر وہ اس پر مشتمل نہیں ہوتا ہے تقسیم دوسرے کے ساتھ ان لائن بلاک عناصر. اگلی قطار میں ٹی شرٹ پھیلنے کے ل you ، آپ کو اسے نصف میں کاٹنا ہوگا اور بقیہ نصف کو نئی صف شروع کرنے کے لئے استعمال کرنا ہوگا۔ ان لائن بلاک اگر عناصر کسی لکیر پر فٹ نہیں بیٹھتے ہیں تو انھیں نصف حصے میں تقسیم ہونے کی اجازت نہیں ہے۔

وہ جرابیں جو خلا کو پُر کرتی ہیں

اصل ایچ ٹی ایم ایل کو دوبارہ دیکھیں اور آپ نوٹ کریں گے کہ ایک جرابیں موجود ہیں Div> آٹھ ٹی شرٹس کے درمیان۔ لیکن دائیں طرف سوٹ کیس کے افقی نظارے پر ایک نظر ڈالیں۔ اگر ایک جرابیں ہوں Div>، یہ درمیانی قطار کو ختم کرنے اور نیچے کی قطار کو کیسے شروع کرسکتا ہے؟ اس کا مقصد ہے ڈسپلے: ان لائن! 

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

ایسا ہونے کے ل No کسی بھی جرابوں کو نصف میں کاٹنے کی ضرورت نہیں ہوگی۔ یہی وجہ ہے کہ وہ بن سکتے ہیں لائن میں، جبکہ ٹی شرٹس ہی ہوسکتی ہیں ان لائن بلاک. اگر درمیانی قطار میں موجود ٹی شرٹس نے چوڑائی کا صرف 60 فیصد لیا تو ، جرابوں Div> صف کے باقی حصوں میں پوری جگہ کو بھرنے کے لئے اوپر جائیں گے۔

تمہارا سفر خوش گاوار گزرے

یہ ہمارے اٹیچی کے لئے آخری سی ایس ایس ہے:

.ڈیلیٹ {ڈسپلے: بلاک؛ چوڑائی: 60٪؛ ts. شرٹ {ڈسپلے: ان لائن بلاک؛ چوڑائی: 20٪؛ s. ساکس {ڈسپلے: ان لائن؛ }

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

اگر ہر ٹی شرٹ ہوتی ڈسپلے بلاک، آپ کے پاس ایک دوسرے کے اوپر ، ہر ایک لائن میں ٹی شرٹس کا بڑے پیمانے پر اسٹیک ہوگا۔ اگر موزے ہوتے ڈسپلے: ان لائن بلاک، وہ سب دونوں قطاروں کے درمیان بہنے کی بجائے نیچے کی قطار پر بیٹھ جاتے۔ کچھ ٹی شرٹس کو چوتھی لائن کی تشکیل کرتے ہوئے ، ایک اور صف پر دھکیل دیا جاتا۔ ٹی شرٹس کی درمیانی قطار کے دائیں طرف ایک خلا ہوگا۔

اس طریقہ کے ساتھ جو میں نے یہاں بیان کیا ہے ، ہم صفائی سے بھرے ہوئے سوٹ کیس کے ساتھ ختم ہوجاتے ہیں جو دستیاب جگہ کا بہترین استعمال کرتا ہے۔

یہ مضمون اصل میں شائع ہوا نیٹ میگزین شمارہ 289؛ اسے یہاں خریدیں!