एचटीएमएल में, दो प्रकार के तत्व इनलाइन और ब्लॉक तत्व हैं। इनलाइन तत्व एक दूसरे के बगल में तत्व रख सकते हैं लेकिन वे डिफ़ॉल्ट रूप से ऊंचाई और चौड़ाई संपत्ति का समर्थन नहीं करते हैं और ब्लॉक तत्व डिफ़ॉल्ट रूप से चौड़ाई और ऊंचाई संपत्ति का समर्थन करते हैं लेकिन हम नहीं कर सकते ब्लॉक तत्वों को दो डिव साइड की तरह रखें
तो, यहां हम देख सकते हैं कि हम इसे कैसे काम कर सकते हैं
हम देखेंगे कि कैसे div 5 अलग-अलग तरीकों से एक दूसरे के बगल में रख सकता है
- प्रदर्शन: इनलाइन-ब्लॉक (पारंपरिक तरीका)
- सीएसएस फ्लेक्सबॉक्स विधि
- सीएसएस ग्रिड विधि
- प्रदर्शन: तालिका विधि
- फ्लोट संपत्ति
[एमसी४डब्ल्यूपी_फॉर्म आईडी=३१४]
प्रदर्शन का उपयोग करना: इनलाइन-ब्लॉक
प्रदर्शन: इनलाइन-ब्लॉक संपत्ति ब्लॉक तत्व को एक दूसरे के बगल में रखने में मदद करती है
लेकिन, हमें ब्लॉक तत्व में अतिरिक्त चौड़ाई गुण जोड़ने की आवश्यकता है क्योंकि डिफ़ॉल्ट रूप से ब्लॉक तत्व 100% चौड़ाई लेता है
उदाहरण के लिए
// सीएसएस
.element { display: inline-block; width: 100px; height: 100px; background: #ce8888; }और आउटपुट होगा
कृपया उदाहरण जांचें यहां
सोनार टाइपस्क्रिप्ट lcov रिपोर्टपथ
फ्लेक्सबॉक्स का उपयोग करना
फ्लेक्सबॉक्स वेबपेज के लेआउट को डिजाइन करने का एक आधुनिक तरीका है और फ्लेक्सबॉक्स एक एकल संपत्ति नहीं है इसका पूरा मॉड्यूल इसमें कई विशेषताएं हैं
आइए देखें कि हम फ्लेक्सबॉक्स का उपयोग करके डिव को एक दूसरे के बगल में कैसे संरेखित कर सकते हैं
// एचटीएमएल फाइल
// सीएसएस फ़ाइल
.container { display: flex; } .item { background: #ce8888; flex-basis: 100px; height: 100px; margin: 5px; }// आउटपुट
प्रदर्शन: फ्लेक्स कंटेनर को दी गई संपत्ति जो फ्लेक्स संदर्भ में बाल तत्व बनाती है और एक दूसरे के बगल में डिव को संरेखित करती है
उपरोक्त उदाहरण में, आप देख सकते हैं कि हमने flex-basis गुण का उपयोग किया है जिसका उपयोग आइटम के लिए न्यूनतम-चौड़ाई देने के लिए किया जाता है। फ्लेक्सबॉक्स को विस्तार से समझने के लिए कृपया इसकी जांच करें
कृपया डेमो ढूंढें यहां
सीएसएस ग्रिड का उपयोग करना
सीएसएस ग्रिड वेब पेज डिजाइन करने के लिए एक और बढ़िया तरीका है और यह पूरा मॉड्यूल है जो कई सुविधाओं के साथ आता है
आइए देखें कि कैसे हम css ग्रिड का उपयोग करके divs को साथ-साथ प्रदर्शित कर सकते हैं
// html
जावास्क्रिप्ट में आदिम डेटा प्रकार
Grid Example // सीएसएस फ़ाइल
.container { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px; grid-column-gap: 5px; } .item { background: #ce8888; }और आउटपुट होगा
संपत्ति प्रदर्शन: ग्रिड ग्रिड लेआउट संरचना चालू करता है
सीएसएस फ़ाइल में, ग्रिड-टेम्पलेट-कॉलम संपत्ति विभाजित करने में मदद करती है कॉलम की संख्या में पेज, हमने दो बार 100px दिया है तो यह दो कॉलम बनाएगा
यह बहुत बड़ा मॉड्यूल है, मुझे लगता है कि आपको चाहिए इसकी जांच - पड़ताल करें पहले विस्तार से उसके बाद ही इसका उपयोग करें।
प्रतिक्रिया मूल कार्रवाई पत्रक
डेमो खोजें यहां
प्रदर्शन तालिका का उपयोग करना
प्रदर्शन: तालिका संपत्ति के लिए एक विकल्प है
// सीएसएस फ़ाइल
.container { display: table; width: 20%; } .table-row { display: table-row; height: 100px; } .table-cell { border: 1px solid; background: #ce8888; display: table-cell; padding: 2px; }और आउटपुट होगा
फ्लोट संपत्ति का उपयोग करना
NS float CSS गुण अपने कंटेनर के बाईं या दाईं ओर एक तत्व रखता है, जिससे टेक्स्ट और इनलाइन तत्वों को इसके चारों ओर लपेटने की अनुमति मिलती है। तत्व को पृष्ठ के सामान्य प्रवाह से हटा दिया गया है, हालांकि अभी भी प्रवाह का एक हिस्सा शेष है
आइए देखें कि कैसे हम फ्लोट का उपयोग करके डिव साइड को एक साथ प्रदर्शित कर सकते हैं
// एचटीएमएल फाइल
// सीएसएस फ़ाइल
.element { float: left; width: 100px; height: 100px; background: #ce8888; margin: 5px }और आउटपुट होगा
कृपया डेमो खोजें यहां
निष्कर्ष:
एक दूसरे के बगल में डिव को संरेखित करने के कई तरीके हैं लेकिन सवाल यह है कि कौन सा बेहतर है
यह पूरी तरह से आवश्यकता पर निर्भर है
फ्लेक्सबॉक्स और सीएसएस ग्रिड वेबपेज के लिए लेआउट करने के आधुनिक तरीके हैं और यह एक पूर्ण मॉड्यूल है और कई विशेषताओं के साथ आता है। मैं फ्लेक्सबॉक्स या सीएसएस ग्रिड की सलाह देता हूं यदि पूरे पृष्ठ को लेआउट करने की आवश्यकता है
विजुअल स्टूडियो के लिए गिटलैब एक्सटेंशन
यदि आपके पास न्यूनतम आवश्यकता है तो डिस्प्ले: इनलाइन-ब्लॉक सही विकल्प है।
यह पोस्ट पहली बार . पर प्रकाशित हुआ टेकबॉक्सवेब
#सीएसएस #html5
Techboxweb.com
CSS का उपयोग करके दो div को एक साथ प्रदर्शित करने के शीर्ष 5 तरीके - TechBoxWeb
यह पता लगाना हमेशा कठिन होता है कि एक-दूसरे के बगल में डिव प्रदर्शित करने के लिए कौन सी विधि सबसे अच्छी है। डिव को साथ-साथ दिखाने के शीर्ष 5 तरीके यहां दिए गए हैं
यह सभी देखें:
- सेलेनियम वेबड्राइवर ट्यूटोरियल | शुरुआती के लिए सेलेनियम ट्यूटोरियल
- 3x लंबा बिटकॉइन कैश टोकन (BCHBULL) कैसे और कहां से खरीदें - एक आसान चरण-दर-चरण मार्गदर्शिका
- कागल डेटासेट को Google Colab में सीधे एक्सेस करना चाहते हैं?
- पुराने Google खाते से फ़ोटो कैसे पुनर्प्राप्त करें
- EMLX फ़ाइलों को अन्य ईमेल और दस्तावेज़ फ़ाइल एक्सटेंशन में कैसे बदलें