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