Understanding the CSS display property

Sep 14, 2025

कैसे करना है

यह आधी रात है, और वह एक डिव आपकी साइट पर अभी भी एक बच्चे की खिलौने की छाती की तरह दिखता है। सभी तत्व एक जंबल गड़बड़ हैं, और हर बार जब आप खेलते हैं सीएसएस की प्रदर्शन संपत्ति, वे खुद को पूरी तरह से बकवास की पूरी तरह से अलग करते हैं।

यदि आप मेरे जैसे हैं, तो आप शायद अपनी सांस के नीचे विचलित करके इसे हल करेंगे और अपने कीबोर्ड के साथ लगातार अधिक आक्रामक बनेंगे। और हालांकि उस रणनीति ने पहले मेरे लिए काम किया है, मैंने हाल ही में समझने के लिए एक बेहतर तरीका खोजने के लिए तैयार किया है प्रदर्शन संपत्ति।

यह मूल बातें बताता है प्रदर्शन मूल रूप से सोचा जितना आसान है। वास्तव में, वे एक सूटकेस पैक करने के समान सिद्धांतों का उपयोग करते हैं। मैं कवर करने जा रहा हूँ प्रदर्शन क्षेत्र , इनलाइन-ब्लॉक तथा पंक्ति में । यदि आपने पहले एक सूटकेस को व्यवस्थित तरीके से व्यवस्थित किया है, तो आप समानांतर देखेंगे। यदि आप ऐसे व्यक्ति हैं जो आपके सभी कपड़ों को एक खतरनाक तरीके से घुमाते हैं - ठीक है, तो केवल इतना ही मैं आपके लिए कर सकता हूं।

हमारे सूटकेस में तीन प्रकार के कपड़े होंगे:

[4 9] एक कॉलर शर्ट की तरह, delicates

[4 9] टी-शर्ट जिन्हें लुढ़काया जा सकता है [4 9] मोजे या अंडरवियर जो अंतराल में भर सकते हैं

संदर्भ के लिए, यदि हमने एचटीएमएल में सूटकेस का मॉडल किया है, तो यह इस तरह दिखेगा:

 & lt; div class = 'सूटकेस' & gt;
    & lt; div class = 'नाजुक' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'मोजे' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
    & lt; div class = 'tshirt' & gt; & lt; / div & gt;
& lt; / div & gt;

शीर्ष पर नाजुक आइटम

The collared shirt sits on a pile of the clothes beneath it. It is the only item that occupies its own layer — कॉलर शर्ट इसके नीचे कपड़ों के ढेर पर बैठती है। यह एकमात्र वस्तु है जो अपनी परत पर कब्जा करती है

प्रदर्शन क्षेत्र अधिकांश HTML तत्वों के लिए डिफ़ॉल्ट है। इसका मतलब है कि तत्व अपने कंटेनर के भीतर संपूर्ण क्षैतिज स्थान पर है डिव । यदि यह अन्य सहोदर तत्वों के बगल में है, तो यह एक नई लाइन शुरू करेगा, और अन्य तत्वों को अपनी लाइन पर अनुमति नहीं देगा। यह आपके सूटकेस के शीर्ष पर रखे नाजुक वस्तुओं के समान है। ये नाजुक या स्मार्ट लेख हैं जैसे कि कॉलर शर्ट। आप उन्हें झुर्रियों के लिए नहीं चाहते हैं, इसलिए आप सुनिश्चित करते हैं कि उन्हें कपड़ों के अन्य टुकड़ों के खिलाफ धक्का नहीं दिया जाता है।

यह सबसे कठिन भागों में से एक को लाता है प्रदर्शन क्षेत्र । ध्यान दें कि कैसे कॉलर शर्ट सूटकेस की पूरी चौड़ाई पर कब्जा नहीं करती है? इसका मतलब यह नहीं है कि अन्य आइटम अपने स्तर तक पहुंच जाएंगे। मान लें कि यह शर्ट सूटकेस की चौड़ाई का 60 प्रतिशत है; यह अभी भी अन्य तत्वों को शीर्ष स्तर पर शामिल होने से रोक देगा।

यही कारण है कि तस्वीर में एक नारंगी सीमा है। ए प्रदर्शन क्षेत्र तत्व स्वचालित रूप से इसके आसपास एक मार्जिन जोड़ देगा यदि यह पूरे क्षैतिज अंतरिक्ष पर कब्जा नहीं करता है।

अच्छी तरह से पैक टी शर्ट

Here we can see the top and bottom rows of T-shirts, with four shirts in each — यहां हम प्रत्येक में चार शर्ट के साथ टी-शर्ट की शीर्ष और निचली पंक्तियों को देख सकते हैं

आपके अधिकांश सूटकेस शायद आपकी यात्रा के लिए आपके बाकी कपड़ों से भरे हुए हैं। सादगी के लिए, हम इसे केवल टी-शर्ट में काटने जा रहे हैं। इंटरनेट पर एक बड़ी बहस है कि फोल्डिंग या रोलिंग अधिक कुशल है या नहीं। मैं एक फोल्डिंग व्यक्ति हूं।

वैसे भी, सबसे अधिक वस्तुओं को फिट करने के लिए, आप अपने टी-शर्ट को तरफ से लाइन करते हैं। यह बिल्कुल वही है प्रदर्शन: इनलाइन-ब्लॉक के लिए मतलब है। ये तत्व एक ही पंक्ति पर एक दूसरे के बगल में बैठ सकते हैं, साथ ही साथ प्रदर्शन: इनलाइन तत्व।

भिन्न प्रदर्शन: इनलाइन तत्व, एक इनलाइन-ब्लॉक यदि तत्व अपनी युक्त में फिट नहीं होता है तो तत्व अगली पंक्ति में चलेगा डिव दूसरे के साथ इनलाइन-ब्लॉक तत्व। अगली पंक्ति पर टी-शर्ट फैलाने के लिए, आपको इसे आधे में कटौती करने और एक नई पंक्ति शुरू करने के लिए शेष आधे का उपयोग करने की आवश्यकता होगी। इनलाइन-ब्लॉक यदि वे एक रेखा पर फिट नहीं होते हैं तो तत्वों को आधे में विभाजित करने की अनुमति नहीं है।

मोजे जो अंतराल में भरते हैं

The socks are inline elements, which means they will fill the gaps around the T-shirts — मोजे इनलाइन तत्व हैं, जिसका अर्थ है कि वे टी-शर्ट के आसपास अंतराल को भर देंगे

मूल HTML पर वापस जांचें और आप ध्यान दें कि एक मोजे हैं & lt; div & gt; आठ टी-शर्ट के बीच। लेकिन दाईं ओर सूटकेस के क्षैतिज दृश्य पर नज़र डालें। अगर एक मोजे हैं & lt; div & gt; , यह मध्य पंक्ति को कैसे समाप्त कर सकता है और नीचे पंक्ति शुरू कर सकता है? इसका उद्देश्य है प्रदर्शन: इनलाइन !

एक पंक्ति में यदि यह चौड़ाई से अधिक है तो तत्व अगली पंक्ति में फैल जाएगा डिव (इस तरह से यह अलग है इनलाइन-ब्लॉक या खंड मैथा )। हमारे मोजे के बाद से डिव मोजे से भरे हुए हैं जो बेतरतीब ढंग से अंतराल में भरवां हैं, यह आसानी से मध्य पंक्ति के दाईं ओर अंतर को भरने और नीचे पंक्ति शुरू करने के लिए फैल सकता है।

ऐसा होने के लिए किसी भी मोजे को आधे में कटौती करने की आवश्यकता नहीं होगी। यही कारण है कि वे बन सकते हैं पंक्ति में , जबकि टी-शर्ट ही हो सकते हैं इनलाइन-ब्लॉक । यदि मध्य पंक्ति पर टी-शर्ट में केवल 60 प्रतिशत चौड़ाई, मोजे थे & lt; div & gt; बाकी पंक्ति पर पूरी जगह भरने के लिए आगे बढ़ेगा।

शुभ यात्रा

यह हमारे सूटकेस के लिए अंतिम सीएसएस है:

। {
    प्रदर्शन क्षेत्र;
    चौड़ाई: 60%;
}

.tshirt {
    प्रदर्शन: इनलाइन-ब्लॉक;
    चौड़ाई: 20%;
}

.socks {
    प्रदर्शन: इनलाइन;
}

प्रदर्शन के विभिन्न उपयोगों को चित्रित करने के लिए यहां कुछ वैकल्पिक परिदृश्य हैं। यदि शीर्ष पर delicates था प्रदर्शन: इनलाइन-ब्लॉक , वे टी-शर्ट के साथ सही फिट होंगे। कुछ टी-शर्ट शीर्ष रेखा तक पहुंच जाएंगे, और शेष तदनुसार समायोजित होंगे। कॉलर शर्ट के बाईं और दाईं ओर कोई आरामदायक बफर नहीं होगा।

यदि प्रत्येक टी-शर्ट थी प्रदर्शन क्षेत्र , आप प्रति पंक्ति एक दूसरे के शीर्ष पर टी-शर्ट का एक बड़ा ढेर होगा। अगर मोजे थे प्रदर्शन: इनलाइन-ब्लॉक , वे सभी दो पंक्तियों के बीच बहने के बजाय नीचे की पंक्ति पर बैठेंगे। कुछ टी-शर्ट को चौथी रेखा बनाने, दूसरी पंक्ति पर धक्का दिया जाएगा। टी-शर्ट की मध्य पंक्ति के दाईं ओर एक अंतर होगा।

मैंने यहां उल्लिखित विधि के साथ, हम एक अच्छी तरह से पैक सूटकेस के साथ समाप्त होते हैं जो उपलब्ध स्थान का सर्वोत्तम उपयोग करता है।

यह लेख मूल रूप से दिखाई दिया नेट पत्रिका अंक 289; यहां खरीदें !

संबंधित आलेख:

एचटीएमएल और सीएसएस सीखने के लिए सबसे अच्छे संसाधनों में से 5

[4 9] Postcss-Flexbox के साथ जटिल लेआउट का निर्माण [4 9] 28 सीएसएस के उत्कृष्ट उदाहरण

Understanding the CSS display property

शीर्ष पर नाजुक आइटम

अच्छी तरह से पैक टी शर्ट

मोजे जो अंतराल में भरते हैं

शुभ यात्रा

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to turn WordPress into a visual builder

How to create a layered parallax effect on your site

फ़ोटोशॉप में एक छवि का आकार बदलने के लिए

Get started with WebVR

10 rules for making user-friendly web forms

Download files for 3D World 232

Create a splash effect in RealFlow

Top tips for painting expressive hands

श्रेणियाँ