सीएसएस फ्लोट

जब आप एक वेब पेज डिजाइन कर रहे होते हैं, तो आप तय कर सकते हैं कि एक विशेष तत्व पेज पर एक निश्चित स्थिति में दिखाई देना चाहिए। उदाहरण के लिए, हो सकता है कि आप किसी पृष्ठ के दाईं ओर एक छवि वाला बॉक्स दिखाना चाहें।

CSS में, फ्लोट प्रॉपर्टी का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि किसी तत्व को कैसे तैनात किया जाना चाहिए। फ्लोट का उपयोग किसी तत्व को वेब पेज के बाईं या दाईं ओर रखने के लिए किया जा सकता है।

यह ट्यूटोरियल उदाहरणों के संदर्भ में चर्चा करेगा कि वेब पेज पर तत्वों की स्थिति के लिए CSS फ्लोट प्रॉपर्टी का उपयोग कैसे करें। इस ट्यूटोरियल को पढ़ने के अंत तक, आप CSS का उपयोग करके वेब पेज पर फ़्लोटिंग तत्वों के विशेषज्ञ होंगे।

CSS फ़्लोट प्रॉपर्टी

फ्लोट प्रॉपर्टी का उपयोग किसी तत्व को वेब पेज के बाईं या दाईं ओर रखने के लिए किया जा सकता है। उदाहरण के लिए, फ्लोट का उपयोग किसी वेब पेज पर एक बॉक्स में टेक्स्ट के दाईं ओर एक छवि को रखने के लिए किया जा सकता है।

फ्लोट प्रॉपर्टी केवल उन तत्वों पर लागू होती है जो बॉक्स उत्पन्न करते हैं और पूरी तरह से वेब पेज पर स्थित नहीं होते हैं। पूरी तरह से स्थित तत्व वेब तत्व होते हैं जो पहले मूल तत्व के सापेक्ष स्थित होते हैं जिनकी स्थिति स्थिर के अलावा अन्य होती है।

फ्लोट संपत्ति के साथ उपयोग किए जाने वाले चार सबसे सामान्य मूल्य हैं:

• बाएं (कंटेनर के बाईं ओर एक तत्व तैरता है)
• दाएं (कंटेनर के दाईं ओर एक तत्व तैरता है)
• कोई नहीं (तत्व पर कोई फ्लोट लागू नहीं है)
• इनहेरिट (तत्व को उसके मूल कंटेनर पर लागू फ्लोट प्रॉपर्टी का उपयोग करके फ़्लोट किया जाता है)।

फ्लोट संपत्ति का सबसे आम उपयोग सीएसएस में एक छवि के चारों ओर पाठ लपेटना है।

सीएसएस फ्लोट उदाहरण

मान लें कि हम स्थानीय Stargazer Blazers . के लिए एक वेबसाइट डिजाइन कर रहे हैं घूरने वाला समाज। क्लब एक वेब पेज बनाना चाहता है जो उनके संगठन के इतिहास की रूपरेखा तैयार करता है। इस वेब पेज में क्लब का संक्षिप्त विवरण होना चाहिए, साथ ही पेज के बाईं ओर स्थित सितारों की एक छवि भी होनी चाहिए।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

हम इस वेब पेज को बनाने के लिए फ्लोट प्रॉपर्टी का उपयोग कर सकते हैं। यहां मूल कोड दिया गया है जिसका उपयोग हम अपने वेब पेज के लिए करेंगे, बिना किसी फ्लोट लागू किए:

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>

हमारा कोड लौटाता है:

इस उदाहरण में, हमारी छवि हमारे पाठ के सामने प्रकट होती है, और कुल मिलाकर पृष्ठ बहुत ही सौंदर्यपूर्ण रूप से मनभावन नहीं है। हालांकि, फ्लोट प्रॉपर्टी का उपयोग करके, हम अपनी छवि को अपने टेक्स्ट के बगल में रख सकते हैं।

यहां वह कोड है जिसका उपयोग हम अपनी छवि को टेक्स्ट के दाईं ओर रखने के लिए करेंगे (जो कि स्टारगेजिंग समाज ने अनुरोध किया था):

styles.css

img {
	float: right;
}

हमारा कोड लौटाता है:

आइए हमारे कोड को तोड़ दें। सबसे पहले, हमने एक

परिभाषित किया जिसमें हमारे वेब पेज के लिए कोड लिखा गया है। फिर हमने अपने टेक्स्ट का मुख्य भाग बनाने के लिए एक

टैग का उपयोग किया, जिसमें Stargazer Blazers क्लब के इतिहास के बारे में विवरण शामिल है। हमारे

टैग के अंदर, हमने सितारों की एक छवि भी शामिल की, जिसका आकार 200×200 है।

हमारी Styles.css फ़ाइल में, जिसमें हमारे वेब पेज के लिए स्टाइल कोड शामिल है, हमने फ्लोट का उपयोग किया:दाएं; टेक्स्ट के दाईं ओर हमारी छवि को फ़्लोट करने के लिए विशेषता। जैसा कि आप ऊपर दिए गए उदाहरण में देख सकते हैं, हमारी छवि हमारे पाठ के दाईं ओर स्थित है। डिफ़ॉल्ट रूप से, छवि हमारे पाठ के सामने दिखाई देगी।

अब, मान लीजिए कि स्टारगेजिंग क्लब ने हमें छवि को टेक्स्ट के बाईं ओर रखने के लिए कहा है। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

styles.css

img {
	float: left;
	margin-right: 20px;
}

हमारा कोड लौटाता है:

इस उदाहरण में, हमने अपनी छवि को अपने पाठ के बाईं ओर फ़्लोट किया। हमने एक मार्जिन-राइट भी निर्दिष्ट किया है:20px; संपत्ति, जो हमारी छवि के बाईं ओर और हमारे पाठ के बीच एक स्थान बनाती है।

फ्लोट के साथ बॉक्स ग्रिड

फ्लोट संपत्ति आपको सामग्री के बक्से बनाने की अनुमति देती है जो साथ-साथ दिखाई देती हैं।

मान लीजिए कि स्टारगेजिंग समाज चाहता था कि तीन छवियां साथ-साथ दिखाई दें, जो उन सितारों को दिखाती हैं जिन्हें लोग देख सकते हैं कि क्या वे शामिल हुए हैं।

हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

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 फ़ाइल में, हमारे पास एक

टैग होता है जिसमें तीन चित्र होते हैं ( टैग द्वारा दर्शाए गए)। प्रत्येक छवि 200×200 आयामों में है और सितारों की एक अनूठी छवि से जुड़ी है। इसके अलावा, प्रत्येक छवि को imageवर्ग असाइन किया गया है ।

हमारी Styles.css फ़ाइल में, हम:

• बॉक्स-साइज़िंग लागू करें:बॉर्डर-बॉक्स; हमारी सूची में प्रत्येक आइटम के लिए शैली, इसलिए किसी तत्व की पैडिंग और सीमा को उसकी कुल चौड़ाई और ऊंचाई में शामिल किया जाएगा। यह हमें अपने तत्वों को बिना किसी डिफ़ॉल्ट रिक्त स्थान के साथ-साथ रखने की अनुमति देता है।
• फ्लोट का प्रयोग करें:बाएं; हमारी छवियों को साथ-साथ दिखाने के लिए।
• चौड़ाई का उपयोग करें:25% प्रत्येक छवि को वेब पेज की चौड़ाई के 25% तक ले जाने के लिए।
• पैडिंग का उपयोग करें:25px; प्रत्येक छवि के बीच एक 25px स्थान बनाने के लिए।

निष्कर्ष

CSS फ्लोट प्रॉपर्टी का उपयोग किसी तत्व को उसके कंटेनर के बाईं या दाईं ओर रखने के लिए किया जाता है। यह टेक्स्ट और अन्य तत्वों को फ़्लोटिंग तत्व के चारों ओर लपेटने की अनुमति देता है।

इस ट्यूटोरियल में उदाहरणों के संदर्भ में चर्चा की गई है कि CSS में एक कंटेनर के बाएँ और दाएँ तत्वों की स्थिति के लिए CSS फ्लोट विशेषता का उपयोग कैसे करें। अब आप CSS विशेषज्ञ की तरह फ्लोट विशेषता का उपयोग शुरू करने के लिए तैयार हैं!