इस लेख में, हम प्रत्येक उल्लिखित दृष्टिकोण पर एक-एक करके चर्चा करेंगे और प्रत्येक विधि का एक उपयुक्त उदाहरण प्रदान करेंगे।
तो चलो शुरू करते है!
विधि 1: CSS में ग्रिड का उपयोग करके दो Divs को साथ-साथ रखें
सीएसएस ' जाल 'लेआउट उपयोगकर्ता को दो या दो से अधिक divs को एक साथ रखने की अनुमति देता है। मूल रूप से, ग्रिड प्रदर्शन गुण का एक मान है जिसका उपयोग पंक्तियों और स्तंभों से युक्त एक लेआउट बनाने के लिए किया जाता है।
वाक्य - विन्यास
ग्रिड लेआउट के साथ डिस्प्ले प्रॉपर्टी का सिंटैक्स नीचे दिया गया है:
प्रदर्शन: ग्रिड
अब, ग्रिड लेआउट का उपयोग करके सीएसएस में दो divs को एक साथ रखने से संबंधित एक उदाहरण देखें।
उदाहरण
यहां, हम पैरेंट डिव के अंदर दो चाइल्ड डिव बनाएंगे, जिसमें क्लास के नाम होंगे “ माता-पिता ',' ' बच्चा ' तथा ' बच्चा ':
< डिव कक्षा = 'माता-पिता' >< डिव कक्षा = 'बच्चा' >< / डिव >
< डिव कक्षा = 'बच्चा' >< / डिव >
< / डिव >
CSS सेक्शन में अगला, “का उपयोग करें” .माता-पिता 'पैरेंट डिव तक पहुंचने के लिए और डिस्प्ले प्रॉपर्टी के मान को' के रूप में सेट करें जाल ' अगला, 'का उपयोग करके भिन्न सेट करें' ग्रिड-टेम्पलेट-कॉलम 'कॉलम के लिए जगह बनाने के लिए संपत्ति। हमारे मामले में, हम भिन्नों को 'के रूप में सेट करेंगे' 1fr ' तथा ' 1fr ”, जिसका अर्थ है कि दोनों divs ने समान स्थान प्राप्त कर लिया है। इसके अलावा, हम दो कॉलम के बीच के गैप को कॉलम-गैप प्रॉपर्टी का उपयोग करके सेट करेंगे और इसके मान को “के रूप में सेट करेंगे। 25px '
सीएसएस:
.माता-पिता {दिखाना : जाल ;
ग्रिड-टेम्पलेट-कॉलम : 1fr 1fr ;
कॉलम-गैप : 25px ;
}
अगले चरण में, हम उपयोग करते हैं ' ।बच्चा 'दोनों चाइल्ड डिव को एक्सेस करने के लिए और डिव की ऊंचाई को' के रूप में सेट करने के लिए 250px 'और पृष्ठभूमि का रंग' के रूप में सेट करें आरजीबी(253, 5, 109) ':
।बच्चा {कद : 250px ;
पार्श्वभूमि : आरजीबी ( 253 , 5 , 109 ) ;
}
यह निम्नलिखित परिणाम दिखाएगा:
डिव को साथ-साथ रखने के लिए दूसरी विधि पर चलते हैं
विधि 2: फ्लेक्स का उपयोग करके सीएसएस में दो डिव को साथ-साथ रखें
' मोड़ना 'प्रदर्शन संपत्ति का मूल्य है जो दो divs को एक साथ रखने की अनुमति देता है। इस गुण का उपयोग लचीली वस्तु के लिए लचीली लंबाई निर्धारित करने के लिए किया जाता है। यह अपने कंटेनर में फिट होने के लिए फ्लेक्स आइटम को सिकोड़ता या बढ़ाता है।
वाक्य - विन्यास
फ्लेक्स के साथ डिस्प्ले प्रॉपर्टी का सिंटैक्स नीचे दिया गया है:
प्रदर्शन: फ्लेक्स;आइए बताई गई अवधारणा को समझने के लिए उदाहरण की ओर बढ़ते हैं।
उदाहरण
हम उसी HTML फ़ाइल पर विचार करेंगे और लागू करेंगे ' मोड़ना 'मूल कंटेनर के लिए। यहां, हम डिस्प्ले प्रॉपर्टी की वैल्यू को फ्लेक्स के रूप में सेट करेंगे और चाइल्ड डिव के बीच गैप को “के रूप में सेट करेंगे। 10px ':
.माता-पिता {दिखाना : मोड़ना ;
अंतर : 10px ;
}
उसके बाद, div की चौड़ाई, ऊंचाई और पृष्ठभूमि का रंग 'के रूप में सेट करें' 650 पिक्सेल ',' ' 200px ', तथा 'आरजीबी (0, 255, 42) ', क्रमश:
।बच्चा {चौड़ाई : 650 पिक्सेल ;
कद : 200px ;
पार्श्वभूमि : आरजीबी ( 0 , 255 , 42 ) ;
}
दिए गए कोड का परिणाम नीचे दिया गया है:
विधि 3: फ्लोट का उपयोग करके सीएसएस में दो डिव एक साथ रखें
CSS फ्लोट प्रॉपर्टी किसी तत्व की फ्लोटिंग दिशा को निर्दिष्ट करती है। अधिक विशेष रूप से, इस संपत्ति का उपयोग सीएसएस में दो divs को एक साथ रखने के लिए किया जा सकता है।
वाक्य - विन्यास
फ्लोट संपत्ति का सिंटैक्स है:
फ्लोट: कोई नहीं|बाएँ|दाएँयहाँ ऊपर दिए गए मानों का विवरण दिया गया है:
- कोई भी नहीं: इसका उपयोग फ्लोटिंग को प्रतिबंधित करने के लिए किया जाता है।
- बाएं: इसका उपयोग बाईं ओर के तत्वों को तैरने के लिए किया जाता है।
- सही: इसका उपयोग तत्वों को दाईं ओर तैरने के लिए किया जाता है।
आइए डिव को साथ-साथ रखने के उदाहरण पर चलते हैं।
उदाहरण
अब, हम
टैग के अंदर दो डिव बनाएंगे और क्लास का नाम ' div1 ' तथा ' div2 ': < तन >< डिव कक्षा = 'div1' >< / डिव >
< डिव कक्षा = 'div2' >< / डिव >
< / तन >
फिर, उपयोग करें ' .div1 ' तथा ' .div2 “HTML अनुभाग में जोड़े गए कंटेनरों तक पहुँचने के लिए। हम दोनों डिव का उपयोग एक ही क्लास में करेंगे क्योंकि हम दोनों को जो गुण और मान असाइन करने जा रहे हैं, वे समान हैं।
इसके बाद, हम फ्लोट संपत्ति के मूल्य को 'के रूप में निर्दिष्ट करते हैं' बाएं 'और div की चौड़ाई और ऊंचाई को' के रूप में सेट करें पचास% ' तथा ' 40% ' हम बॉक्स-साइज़िंग प्रॉपर्टी का भी उपयोग करते हैं और इसका मान ' बॉर्डर-बॉक्स ' इसके अलावा, div की पृष्ठभूमि का रंग 'के रूप में सेट करें' आरजीबी (7, 255, 222) 'और सीमा संपत्ति के मूल्यों को' के रूप में सेट करें 3पीएक्स ',' ' ठोस ', तथा ' आरजीबी (255, 0, 255) ':
.div1 , .div2 {पानी पर तैरना : बाएं ;
चौड़ाई : पचास% ;
कद : 40% ;
बॉक्स आकार : बॉर्डर-बॉक्स ;
पार्श्वभूमि : आरजीबी ( 7 , 255 , 222 ) ;
सीमा : 3पीएक्स ठोस आरजीबी ( 255 , 0 , 255 ) ;
}
टिप्पणी: आप डिव के अलग-अलग बैकग्राउंड कलर सेट करके बॉक्स-साइज़िंग प्रॉपर्टी और बॉर्डर प्रॉपर्टी का उपयोग किए बिना दो डिव को साथ-साथ रख सकते हैं।
उपरोक्त कोड को लागू करने के बाद, HTML फ़ाइल निष्पादित करें और परिणाम देखें:
टिप्पणी: दो डिव के बीच गैप बनाने के लिए, पहले एक और डिव बनाएं और फिर उसी के अनुसार डिव का मार्जिन सेट करें।
निष्कर्ष
सीएसएस के तीन अलग-अलग तरीकों का उपयोग करके डिव को एक साथ रखा जा सकता है, जो कि “ मोड़ना ' तथा ' जाल 'प्रदर्शन संपत्ति के मूल्य और' पानी पर तैरना ' संपत्ति। प्रत्येक विधि कुशलता से काम करती है; हालाँकि, आप हमारी आवश्यकताओं के अनुसार उनमें से किसी का भी उपयोग कर सकते हैं। इस गाइड में, हमने CSS का उपयोग करके div को एक साथ रखने के तीन तरीकों पर चर्चा की है और संबंधित उदाहरण प्रदान किए हैं।