यहां 3 तरीके दिए गए हैं जिनसे आप CSS का उपयोग करके HTML div एलिमेंट्स को अगल-बगल रख सकते हैं।
(प्रत्येक अनुभाग पर जाने के लिए क्लिक करें)
- फ्लोट विधि
- फ्लेक्सबॉक्स विधि
- CSS ग्रिड विधि
फ्लोट विधि
फ्लोट विधि में, हम निम्नलिखित HTML मार्कअप का उपयोग करेंगे:
<div class="float-container"> <div class="float-child"> <div class="green">Float Column 1</div> </div> <div class="float-child"> <div class="blue">Float Column 2</div> </div> </div>.float-container केवल पैरेंट एलिमेंट है जिसमें दोनों .float-child एलिमेंट्स होते हैं।
divs को अगल-बगल करने के लिए, हम निम्नलिखित CSS नियमों का उपयोग करेंगे:
.float-container { border: 3px solid #fff; padding: 20px; } .float-child { width: 50%; float: left; padding: 20px; border: 2px solid red; } परिणामी कोड इस तरह दिखेगा:
मैंने divs में बॉर्डर और पैडिंग जोड़ी है ताकि आप आसानी से देख सकें कि वास्तव में क्या हो रहा है। बाहर की मोटी सफेद बॉर्डर .float-container div है, जिसमें 20px पैडिंग है।
फिर प्रत्येक .float-child एलिमेंट में एक पतली लाल बॉर्डर और कुछ और पैडिंग है। फिर वास्तविक कलर ब्लॉक .float-child एलिमेंट्स के चाइल्ड एलिमेंट्स हैं। (आप जल्द ही देखेंगे कि क्यों।)
divs को अगल-बगल स्थित करने के लिए, हम प्रत्येक .float-child एलिमेंट को बाईं ओर फ्लोट करने के लिए float प्रॉपर्टी का उपयोग कर रहे हैं।
चूंकि वे दोनों बाईं ओर फ्लोट कर रहे हैं, यदि दोनों के फिट होने के लिए पर्याप्त जगह है तो वे अगल-बगल प्रदर्शित होंगे। वे फिट होते हैं क्योंकि हमारे पास दो .float-child divs हैं, प्रत्येक 50% चौड़ाई पर।
और divs के बीच की जगह प्रत्येक .float-child div में पैडिंग जोड़कर बनाई गई है, जिसमें फिर कलर ब्लॉक होते हैं।
प्रत्येक कॉलम को बाहरी div में नेस्ट करके कॉलम के बीच जगह जोड़ें
कलर ब्लॉक्स के लिए बाहरी div (.float-child) होना आवश्यक है ताकि जगह जोड़ी जा सके और दोनों ब्लॉक अगल-बगल फिट हो सकें।
खैर, क्या होगा यदि हमारे पास पैडिंग के बिना केवल .float-child divs हों, और इसके बजाय पहले ब्लॉक पर margin-right मान लगाकर जगह जोड़ने का प्रयास करें जैसे?
HTML:
<div class="float-container"> <div class="float-child green"> Float Column 1 </div> <div class="float-child blue"> Float Column 2 </div> </div> CSS:
.float-child.green { margin-right: 20px; }इस मामले में, दोनों .float-child एलिमेंट्स कुल चौड़ाई का 50% लेंगे। लेकिन पहला हरा एलिमेंट 20px का मार्जिन भी लेगा।
इसका मतलब है कि दोनों ब्लॉक 50% + 20px + 50% चौड़ाई लेंगे। यह 100% चौड़ाई से 20px अधिक होगा, जिसका अर्थ है कि दोनों के अगल-बगल होने के लिए पर्याप्त जगह नहीं है।
दूसरा नीला ब्लॉक तब पहली ब्लॉक के नीचे अगली पंक्ति पर रैप होगा, और वहां बाईं ओर फ्लोट करेगा:
आप चौड़ाई को 48% या 50% से कम किसी अन्य संख्या पर एडजस्ट करने का प्रयास कर सकते हैं ताकि वे फिट हो जाएं। लेकिन यह सटीक नहीं होगा।
इसलिए मैं व्यक्तिगत रूप से ब्लॉक्स को 50% चौड़ाई पर सेट बाहरी div में लपेटना पसंद करता हूं, जिसमें पैडिंग divs के बीच जगह जोड़ने के लिए हो।
आजकल, फ्लोट के बजाय CSS में अन्य, नई विधियों का उपयोग करके divs को अगल-बगल रखना आसान है।
आइए इनमें से एक पर नज़र डालें: फ्लेक्सबॉक्स विधि!
फ्लेक्सबॉक्स विधि
फ्लेक्सबॉक्स के साथ, हम अपने दो div एलिमेंट्स को संरेखित करने का एक अधिक सहज तरीका उपयोग कर सकते हैं।
HTML:
<div class="flex-container"> <div class="flex-child magenta"> Flex Column 1 </div> <div class="flex-child green"> Flex Column 2 </div> </div> CSS:
.flex-container { display: flex; } .flex-child { flex: 1; border: 2px solid yellow; } .flex-child:first-child { margin-right: 20px; } फ्लेक्सबॉक्स के साथ, हमने पैरेंट .flex-container एलिमेंट पर display: flex सेट किया है। यह फ्लेक्सबॉक्स चालू करता है।
फिर प्रत्येक .flex-child एलिमेंट में, हम flex: 1 सेट कर रहे हैं। यह संख्या पैरेंट फ्लेक्स एलिमेंट में प्रत्येक चाइल्ड की चौड़ाई की तुलना करने वाले अनुपात की तरह है।
चूंकि वे समान हैं, उपलब्ध स्थान समान रूप से विभाजित होगा। और चूंकि हमारे पास दो चाइल्ड एलिमेंट्स हैं, वे प्रत्येक 50% लेंगे।
परिणामी कोड यहां इस तरह दिखेगा:
मार्जिन का उपयोग करके divs के बीच जगह जोड़ें, और यह अभी भी फिट होगा!
ध्यान दें कि हमने केवल पहले .flex-child एलिमेंट पर margin-right: 20px जोड़कर जगह जोड़ी है। हालांकि, फ्लेक्सबॉक्स शेष उपलब्ध चौड़ाई को विभाजित करते समय उस अतिरिक्त 20px को ध्यान में रखने के लिए पर्याप्त बुद्धिमान है।
इसका मतलब है कि आप सटीक पिक्सल की गणना किए बिना मार्जिन के साथ जगह जोड़ सकते हैं। फ्लेक्सबॉक्स आपके लिए कंटेंट को फिट करेगा!
यह एक बड़ा कारण है कि मुझे फ्लेक्सबॉक्स पसंद है।
हालांकि, यदि आपके पास कई एलिमेंट्स हैं जिन्हें आप रिस्पॉन्सिव ग्रिड में लेआउट करना चाहते हैं, तो आप हमेशा नहीं जानते कि आपको एलिमेंट्स के बीच वह जगह कहां जोड़नी है।
हमारे मामले में, यदि हम मोबाइल के लिए दो divs को एक के नीचे एक स्टैक करना चाहते हैं, तो हमें मोबाइल विड्थ के लिए उस margin-right प्रॉपर्टी को हटाना होगा।
या आप फ्लोट विधि के साथ हमने जो किया था, उसके समान प्रत्येक .flex-child एलिमेंट के लिए एक अतिरिक्त बाहरी एलिमेंट प्लस पैडिंग जोड़ सकते हैं।
यह 100% सहज नहीं है, लेकिन यह अभी भी काम करेगा। यदि आपको फ्लेक्सबॉक्स के साथ अधिक जटिल रिस्पॉन्सिव लेआउट बनाने की आवश्यकता है, तो आपको इसे ध्यान में रखना होगा।
आइए अब दो divs को अगल-बगल रखने के लिए उपयोग की जा सकने वाली नवीनतम विधि पर नज़र डालें: CSS ग्रिड।
CSS ग्रिड विधि
और यहां बताया गया है कि आप CSS ग्रिड का उपयोग करके दो divs को अगल-बगल कैसे रख सकते हैं:
HTML:
<div class="grid-container"> <div class="grid-child purple"> Grid Column 1 </div> <div class="grid-child green"> Grid Column 2 </div> </div>CSS:
.grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; }और यहां कोड इस तरह दिखेगा:
ग्रिड के साथ एक बड़ा बदलाव यह है कि आप पहले निर्धारित करते हैं कि ग्रिड टेम्पलेट कैसा दिखेगा। मतलब आपके लेआउट में आप कितने कॉलम और/या पंक्तियां चाहते हैं।
हमारे मामले में, हम समान चौड़ाई के दो कॉलम चाहते हैं। तो पैरेंट .grid-container एलिमेंट में, हम display: grid के साथ ग्रिड चालू करते हैं। फिर हम grid-template-columns प्रॉपर्टी के साथ अपने लेआउट में कितने कॉलम चाहते हैं, उसे जोड़ते हैं।
हम समान चौड़ाई के दो कॉलम चाहते हैं, इसलिए हम इसे 1fr 1fr पर सेट करते हैं। यह ब्राउज़र को दो-कॉलम लेआउट बनाने के लिए कहता है, और प्रत्येक कॉलम 1fr (fr = फ्रैक्शनल यूनिट) स्थान लेता है।
fr यूनिट एक कॉलम का दूसरे से अनुपात है, फ्लेक्सबॉक्स विधि में हमने जिस flex: 1 नियम का उपयोग किया था, उसके समान। कॉलम को 1fr 1fr पर सेट करने का मतलब है कि प्रत्येक कॉलम समान मात्रा में स्थान लेगा।
grid-gap प्रॉपर्टी के साथ ग्रिड आइटम्स के बीच जगह जोड़ना
CSS ग्रिड का उपयोग करने का एक बड़ा लाभ यह है कि आपको ग्रिड आइटम्स के बीच जगह जोड़ने के लिए पैडिंग या मार्जिन का उपयोग करने की आवश्यकता नहीं है।
आप अपने ग्रिड टेम्पलेट में स्वचालित रूप से जगह जोड़ने के लिए grid-gap (या नए ब्राउज़रों में gap) का उपयोग कर सकते हैं।
हमने grid-gap को 20px पर सेट किया है, इसलिए ब्राउज़र को पता होगा कि सभी आइटम्स के बीच 20px की जगह जोड़नी है, चाहे वे अगल-बगल हों या स्टैक्ड।
और आपने देखा होगा कि ग्रिड के लिए सभी CSS प्रॉपर्टीज़ पैरेंट .grid-container एलिमेंट पर सेट की गई थीं। हमें चाइल्ड .grid-child एलिमेंट्स के लिए वास्तव में कोई CSS लिखने की आवश्यकता नहीं थी!
