सीएसएस फ्लोट को समझना

वेब पेज लेआउट डिजाइन करने के लिए सीएसएस फ्लोट संपत्ति का उपयोग करना

सीएसएस संपत्ति लेआउट के लिए एक बहुत ही महत्वपूर्ण संपत्ति है। यह आपको अपने वेब पेज डिज़ाइन को ठीक तरह से प्रदर्शित करने की अनुमति देता है जैसा कि आप उन्हें प्रदर्शित करना चाहते हैं-लेकिन इसका उपयोग करने के लिए आपको यह समझना होगा कि यह कैसे काम करता है।

स्टाइल शीट में, सीएसएस फ्लोट प्रॉपर्टी इस तरह दिखती है:

सही {फ्लोट: दाएं; }

यह ब्राउज़र को बताता है कि "दाएं" वर्ग के साथ सब कुछ दाईं ओर फ़्लोट किया जाना चाहिए।

आप इसे इस तरह असाइन करेंगे:

वर्ग = "दाएं" />

सीएसएस फ्लोट संपत्ति के साथ आप क्या फ़्लोट कर सकते हैं?

आप वेब पेज पर हर तत्व को फ्लोट नहीं कर सकते हैं। आप केवल ब्लॉक-स्तरीय तत्वों को ही फ़्लोट कर सकते हैं। ये वे तत्व हैं जो पृष्ठ पर स्थान का एक ब्लॉक लेते हैं, जैसे छवियां (), पैराग्राफ (), डिवीजन (), और सूचियां ()।

पाठ को प्रभावित करने वाले अन्य तत्व, लेकिन पृष्ठ पर एक बॉक्स नहीं बनाते हैं इनलाइन तत्व कहा जाता है और इसे फ़्लोट नहीं किया जा सकता है। ये स्पैन (), लाइन ब्रेक (), मजबूत जोर (), या इटालिक्स () जैसे तत्व हैं।

वे कहाँ फ़्लोट करते हैं?

आप दाएं या बाएं तत्वों को फ्लोट कर सकते हैं। फ्लोटेड तत्व का पालन करने वाला कोई भी तत्व दूसरी तरफ तैरने वाले तत्व के चारों ओर बह जाएगा।

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

यह आम तौर पर छवि के नीचे प्रदर्शित निम्नलिखित पाठ की पहली पंक्ति के साथ होता है।

वे कितनी दूर फ़्लोट करेंगे?

एक तत्व जो फ़्लोट किया गया है, कंटेनर तत्व के बाएं या दाएं तक जा सकता है जैसा कि यह कर सकता है। यह आपके कोड को लिखे जाने के आधार पर कई अलग-अलग स्थितियों में परिणाम देता है।

इन उदाहरणों के लिए, मैं बाईं ओर एक छोटा डीआईवी तत्व तैर रहा हूं:

• यदि फ्लोट किए गए तत्व में पूर्व परिभाषित चौड़ाई नहीं है, तो फ्लोट के बावजूद, यह आवश्यक और उपलब्ध जितना क्षैतिज स्थान लेगा। नोट: कुछ ब्राउज़र फ़्लोट किए गए तत्वों के बगल में तत्वों को रखने का प्रयास करते हैं जब चौड़ाई परिभाषित नहीं होती है-आमतौर पर गैर-फ्लोट किए गए तत्व को केवल थोड़ी मात्रा में स्थान प्रदान करते हैं। तो आपको हमेशा फ्लोट किए गए तत्वों पर एक चौड़ाई परिभाषित करनी चाहिए।
• यदि कंटेनर तत्व HTML तत्व है, तो फ़्लोटेड डीआईवी पृष्ठ के बाएं हाशिए पर बैठेगी।
• यदि कंटेनर तत्व स्वयं किसी और चीज से निहित है, तो फ्लोटेड डीआईवी कंटेनर के बाएं हाशिए पर बैठेगी।
• आप घोंसले वाले तत्वों को घोंसला कर सकते हैं, और इसके परिणामस्वरूप फ्लोट एक आश्चर्यजनक जगह पर समाप्त हो सकता है। उदाहरण के लिए, यह फ्लोट एक बाएं फ्लोट डीआईवी दाएं फ्लोटेड डीआईवी के अंदर है।
• कंटेनर में कमरा होने पर फ़्लोट किए गए तत्व एक-दूसरे के बगल में बैठेंगे। उदाहरण के लिए, इस कंटेनर में 400px चौड़े कंटेनर में तीन 100px विस्तृत DIV तत्व फ़्लोट किए गए हैं।

आप एक फोटो गैलरी लेआउट बनाने के लिए भी फ्लोट का उपयोग कर सकते हैं। आप प्रत्येक थंबनेल डालते हैं (यह एक ही आकार में सबसे अच्छा काम करता है) कैप्शन के साथ एक डीआईवी में और कंटेनर में डीआईवी तत्वों को तैरता है।

कोई फर्क नहीं पड़ता कि ब्राउज़र विंडो कितनी व्यापक है, थंबनेल समान रूप से लाइन अप करेंगे।

फ्लोट बंद करना

एक बार जब आप फ्लोट करने के लिए तत्व प्राप्त करने के बारे में जानते हैं, तो यह जानना महत्वपूर्ण है कि फ्लोट को कैसे बंद किया जाए। आप सीएसएस स्पष्ट संपत्ति के साथ फ्लोट बंद कर देते हैं। आप बाएं फ्लोट, दाएं फ्लोट या दोनों साफ़ कर सकते हैं:

साफ़ करें: बाएं;
स्पष्ट: दाएं;
दोनों को साफ करो;

कोई भी तत्व जिसे आपने स्पष्ट संपत्ति सेट की है वह उस तत्व के नीचे दिखाई देगी जो उस दिशा में तैरती है। उदाहरण के लिए, इस उदाहरण में पाठ के पहले दो पैराग्राफ साफ़ नहीं किए जाते हैं, लेकिन तीसरा है।

विभिन्न लेआउट प्रभाव प्राप्त करने के लिए अपने दस्तावेज़ों में विभिन्न तत्वों के स्पष्ट मूल्य के साथ खेलो।

सबसे रोचक फ्लोटेड लेआउट में से एक टेक्स्ट के पैराग्राफ के बगल में दाएं या बाएं कॉलम के नीचे छवियों की एक श्रृंखला है। यहां तक ​​कि यदि पाठ छवि के पीछे स्क्रॉल करने के लिए पर्याप्त नहीं है, तो आप यह सुनिश्चित करने के लिए सभी छवियों पर स्पष्ट रूप से उपयोग कर सकते हैं कि वे पिछली छवि के बगल में कॉलम में दिखाई दें।

एचटीएमएल (इस पैराग्राफ को दोहराएं):

Duis aute irure dolor sed vupuptate में reprehenderit में eiusmod tempor incididunt करते हैं। Cupidatat गैर proident, प्रयोगशाला और dolore magna aliqua के लिए।

सीएसएस (बाईं ओर छवियों को तैरने के लिए):

img.float {फ्लोट: बाएं;
स्पष्ट: छोड़ा;
मार्जिन: 5px;
}

और दाईं ओर:

img.float {फ्लोट: दाएं;
स्पष्ट: ठीक है,
मार्जिन: 5px;
}

लेआउट के लिए फ्लोट्स का उपयोग करना

एक बार जब आप समझते हैं कि फ्लोट प्रॉपर्टी कैसे काम करती है, तो आप अपने वेब पेजों को रखने के लिए इसका उपयोग शुरू कर सकते हैं। फ़्लोट किए गए वेब पेज बनाने के लिए ये चरण हैं:

• लेआउट डिज़ाइन करें (पेपर पर या ग्राफिक्स टूल में या मेरे सिर में)।
• निर्धारित करें कि पेज डिवीजन कहां होने जा रहे हैं।
• विभिन्न कंटेनर की चौड़ाई और उनके भीतर के तत्वों का निर्धारण करें।
• सब कुछ फ़्लोट करें। यहां तक ​​कि बाहरीतम कंटेनर तत्व बाईं ओर तैरता है ताकि मुझे पता चले कि यह ब्राउज़र दृश्य पोर्ट के संबंध में कहां होगा।

जब तक आप अपने लेआउट अनुभागों की चौड़ाई (प्रतिशत ठीक हैं) जानते हैं, तब तक आप फ़्लोट प्रॉपर्टी का उपयोग उन पृष्ठों को रखने के लिए कर सकते हैं जहां वे पृष्ठ पर हैं। और अच्छी बात यह है कि आपको इंटरनेट एक्सप्लोरर या फ़ायरफ़ॉक्स के लिए बॉक्स मॉडल के बारे में ज्यादा चिंता करने की ज़रूरत नहीं है।