जब आप वेब पेज डिज़ाइन कर रहे होते हैं, तो आप तय कर सकते हैं कि किसी विशेष एलिमेंट को पेज पर एक निश्चित स्थिति में दिखना चाहिए। उदाहरण के लिए, आप चाह सकते हैं कि इमेज वाला बॉक्स पेज के दाईं ओर दिखाई दे।
CSS में, float प्रॉपर्टी का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि एलिमेंट को कैसे स्थित किया जाना चाहिए। Float का उपयोग वेब पेज पर एलिमेंट को बाएं या दाएं स्थित करने के लिए किया जा सकता है।
यह ट्यूटोरियल, उदाहरणों के संदर्भ में, चर्चा करेगा कि CSS float प्रॉपर्टी का उपयोग वेब पेज पर एलिमेंट्स को स्थित करने के लिए कैसे करें। इस ट्यूटोरियल को पढ़ने के अंत तक, आप CSS का उपयोग करके वेब पेज पर एलिमेंट्स को फ्लोट करने में एक्सपर्ट होंगे।
CSS Float प्रॉपर्टी
float प्रॉपर्टी का उपयोग वेब पेज पर एलिमेंट को बाएं या दाएं स्थित करने के लिए किया जा सकता है। उदाहरण के लिए, float का उपयोग वेब पेज पर बॉक्स में टेक्स्ट के दाईं ओर इमेज को स्थित करने के लिए किया जा सकता है।
float प्रॉपर्टी केवल उन एलिमेंट्स पर लागू होती है जो बॉक्स उत्पन्न करते हैं और वेब पेज पर绝对 रूप से स्थित नहीं हैं। Absolutely positioned एलिमेंट्स वे वेब एलिमेंट्स हैं जो पहले पैरेंट एलिमेंट के सापेक्ष स्थित हैं जिसकी पोजीशन static के अलावा अन्य है।
float प्रॉपर्टी के साथ उपयोग किए जाने वाले चार सबसे आम मान हैं:
- left (कंटेनर के बाएं एलिमेंट को फ्लोट करता है)
- right (कंटेनर के दाएं एलिमेंट को फ्लोट करता है)
- none (एलिमेंट पर कोई फ्लोट लागू नहीं होता)
- inherit (एलिमेंट को उसके पैरेंट कंटेनर पर लागू float प्रॉपर्टी का उपयोग करके फ्लोट किया जाता है)।
float प्रॉपर्टी का सबसे आम उपयोग CSS में टेक्स्ट को इमेज के चारों ओर लपेटना है।
CSS Float उदाहरण
आइए मान लें हम स्थानीय Stargazer Blazers स्टारगेजिंग सोसाइटी के लिए वेबसाइट डिज़ाइन कर रहे हैं। क्लब चाहता है कि एक वेब पेज हो जो उनके संगठन के इतिहास को रेखांकित करे। इस वेब पेज में क्लब का संक्षिप्त विवरण होना चाहिए, साथ ही पेज के बाईं ओर स्थित सितारों की इमेज होनी चाहिए।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी टेक जॉब संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही बूटकैंप से मैच करवाएं।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी ढूंढने तक।
हम इस वेब पेज को बनाने के लिए float प्रॉपर्टी का उपयोग कर सकते हैं। यहां बेसिक कोड है जिसका उपयोग हम अपने वेब पेज के लिए करेंगे, बिना किसी float के लागू किए:
index.html <div> <p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" /> The Stargazer Blazers society, founded in 2017, is dedicated to viewing the stars in San Francisco, CA. The society was created after a meeting of two passionate stargazers in the Bay Area, Jeff Holmes and Paula Ingleson, who were looking to find other people with whom to discuss their passion. Today, our organization has over 200 members in the Bay Area, and meets monthly to gaze at the stars and discuss our members' discoveries. </p> </div>
हमारा कोड लौटाता है:
इस उदाहरण में, हमारी इमेज हमारे टेक्स्ट से पहले दिखाई देती है, और कुल मिलाकर पेज बहुत सौंदर्यपूर्ण रूप से मनभावन नहीं है। हालांकि, float प्रॉपर्टी का उपयोग करके, हम अपनी इमेज को अपने टेक्स्ट के बगल में स्थित कर सकते हैं।
यहां वह कोड है जिसका उपयोग हम अपनी इमेज को टेक्स्ट के दाईं ओर स्थित करने के लिए करेंगे (जो स्टारगेजिंग सोसाइटी ने अनुरोध किया था):
styles.css img { float: right; }
हमारा कोड लौटाता है:
आइए हमारे कोड को तोड़ते हैं। सबसे पहले, हमने एक <div> परिभाषित किया जिसमें हमारे वेब पेज का कोड लिखा गया है। फिर हमने टेक्स्ट का शरीर बनाने के लिए <p> टैग का उपयोग किया, जिसमें Stargazer Blazers क्लब के इतिहास के बारे में विवरण शामिल है। हमारे <p> टैग के अंदर, हमने सितारों की इमेज भी शामिल की, जो आकार में 200x200 है।
हमारी styles.css फाइल में, जिसमें हमारे वेब पेज के लिए स्टाइल कोड शामिल है, हमने अपनी इमेज को टेक्स्ट के दाईं ओर फ्लोट करने के लिए float: right; एट्रिब्यूट का उपयोग किया। जैसा कि आप उपरोक्त उदाहरण में देख सकते हैं, हमारी इमेज हमारे टेक्स्ट के दाईं ओर स्थित है। डिफ़ॉल्ट रूप से, इमेज हमारे टेक्स्ट से पहले दिखाई देगी।
अब, मान लें स्टारगेजिंग क्लब ने हमसे इमेज को टेक्स्ट के बाईं ओर स्थित करने के लिए कहा। हम इसे इस कोड का उपयोग करके कर सकते हैं:
styles.css img { float: left; margin-right: 20px; }
हमारा कोड लौटाता है:
इस उदाहरण में, हमने अपनी इमेज को अपने टेक्स्ट के बाईं ओर फ्लोट किया। हमने margin-right: 20px; प्रॉपर्टी भी निर्दिष्ट की, जो हमारी इमेज के बाएं और हमारे टेक्स्ट के बीच जगह बनाती है।
Float के साथ बॉक्स ग्रिड
float प्रॉपर्टी आपको कंटेंट के बॉक्स बनाने की अनुमति देती है जो अगल-बगल दिखाई देते हैं।
मान लें स्टारगेजिंग सोसाइटी चाहती थी कि तीन इमेजेज अगल-बगल दिखाई दें, जो उन सितारों को दिखाती हैं जो लोग ज्वाइन करने पर देख सकते हैं।
हम इस कार्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:
index.html <div> <img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" /> <img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" /> <img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" /> </div>
styles.css * { box-sizing: border-box }; .image { float: left; width: 25%; padding: 25px; }
हमारा कोड लौटाता है:
आइए हमारे कोड को तोड़ते हैं। हमारी HTML फाइल में, हमारे पास एक <div> टैग है जिसमें तीन इमेजेज हैं (जिन्हें <img> टैग्स द्वारा दर्शाया गया है)। प्रत्येक इमेज आयाम में 200x200 है और सितारों की एक अद्वितीय इमेज से लिंक करती है। इसके अलावा, प्रत्येक इमेज को image क्लास असाइन की गई है।
हमारी styles.css फाइल में, हम:
- हमारी लिस्ट में हर आइटम पर box-sizing: border-box; स्टाइल लागू करते हैं, ताकि एलिमेंट का पैडिंग और बॉर्डर इसकी कुल चौड़ाई और ऊंचाई में शामिल हो। यह हमें अपने एलिमेंट्स को डिफ़ॉल्ट स्पेसेस के बिना अगल-बगल स्थित करने की अनुमति देता है।
- अपनी इमेजेज को अगल-बगल दिखाने के लिए float: left; का उपयोग करते हैं।
- प्रत्येक इमेज को वेब पेज की चौड़ाई का 25% बनाने के लिए width: 25% का उपयोग करते हैं।
- प्रत्येक इमेज के बीच 25px स्पेस बनाने के लिए padding: 25px; का उपयोग करते हैं।
निष्कर्ष
CSS float प्रॉपर्टी का उपयोग एलिमेंट को उसके कंटेनर के बाएं या दाएं तरफ रखने के लिए किया जाता है। यह टेक्स्ट और अन्य एलिमेंट्स को फ्लोटिंग एलिमेंट के चारों ओर लपेटने की अनुमति देता है।
इस ट्यूटोरियल ने उदाहरणों के संदर्भ में चर्चा की कि CSS में कंटेनर के बाएं और दाएं एलिमेंट्स को स्थित करने के लिए CSS float एट्रिब्यूट का उपयोग कैसे करें। अब आप CSS एक्सपर्ट की तरह float एट्रिब्यूट का उपयोग शुरू करने के लिए तैयार हैं!
