सीएसएस फ्लोट सम्पत्ति को डिजाइन वेब पेज लेआउट को प्रयोग गरेर
CSS गुण लेआउटको लागि धेरै महत्त्वपूर्ण सम्पत्ति हो। यसले तपाइँलाई तपाइँको वेब पेजको डिजाईनलाई ठीक तरिकाले प्रस्तुत गर्न अनुमति दिन्छ जुन तपाइँले प्रदर्शन गर्न चाहानुहुन्छ - तर यसलाई प्रयोग गर्नको लागि तपाईँले यो कसरी काम गर्दछ भनेर बुझ्न पाउनु हुन्छ।
एक शैली पानामा, CSS फ्लोट गुण यो जस्तो देखिन्छ:
.right {फ्लोट: दायाँ; }
यसले ब्राउजरलाई बताउँछ कि "दाँया" को कक्षासँग सबै दाँया तिर निस्कनु पर्छ।
तपाईलाई यो मनपराउनेछ:
class = "right" />
तपाईले सीएसएस फ्लोट सम्पत्तीसँग के गर्न सक्नुहुन्छ?
तपाइँ वेब पेजमा प्रत्येक तत्वलाई फ्लोट गर्न सक्नुहुन्न। तपाईं केवल ब्लक-स्तर तत्वहरू फ्लोट गर्न सक्नुहुन्छ। यी पृष्ठहरू जुन छविहरू (), अनुच्छेदहरू (), विभाजनहरू () र सूचीहरू () को रूपमा स्पेसको ब्लक लिने तत्वहरू हुन्।
अन्य तत्वहरू पाठलाई असर गर्छ, तर पृष्ठमा बक्स सिर्जना नगर्नुलाई इनलाइन तत्वहरू भनिन्छन् र फ्लोट गर्न सकिदैन। यी तत्वहरू (span)), रेखा ब्रेक (), बलियो जोर (), वा इटालिक () जस्तै तत्वहरू छन्।
तिनीहरू कहाँ घुमाउँछन्?
तपाईं दाँया वा बायाँमा तत्वहरू फ्लोट गर्न सक्नुहुन्छ। फ्लोटेड तत्व पछ्याउने कुनैपनि तत्वले अर्को पक्षमा फ्लोटेड तत्व वरपर प्रवाह गर्नेछ।
उदाहरणका लागि, यदि मैले बायाँतिर एक छविलाई खारेज गर्छ भने, कुनै पनि पाठ वा अन्य तत्वहरू यसको पछि दायाँतिर उडान हुनेछ। र यदि मैले दायाँ तिर एउटा छवि उड्छ भने, कुनै पाठ वा अन्य तत्वहरूले यसको पछि बायाँतिर उडान गर्नेछ। कुनै पनि फ्लोट शैली बिना पाठको ब्लकमा राखिएको छविलाई प्रदर्शन गरिनेछ तथापि ब्राउजर छविहरू प्रदर्शन गर्न सेट गरिएको छ।
यो सामान्यतया चित्रको तलमा प्रदर्शित निम्न पाठको पहिलो रेखा हो।
तिनीहरूले कसरी फ्लोट गर्नेछन्?
फ्लोटेड गरिएको एक तत्त्वले कन्टेनर तत्त्वको बायाँ वा दाँया घुमाउनेछ जुन यो गर्न सक्छ। यो तपाईंको कोड लेखिएको छ कि कसरी निर्भर गर्दछ धेरै फरक परिस्थितिहरूमा परिणाम।
यी उदाहरणहरूको लागि, म बायाँतिर एक सानो डीआईभी तत्व उचाल्नेछु:
- यदि फ्लोटेड तत्वमा पूर्व-परिभाषित चौडाइ छैन भने, आवश्यक रूपमा आवश्यक र उपलब्ध रूपमा क्षैतिज ठाउँ उठाउनेछ, फ्लोट को बाहेक। नोट: चौडाइ परिभाषित गर्दा कुनै ब्राउजरले फ्लोटेड तत्वहरूको छेउमा तत्वहरू खोज्ने प्रयास गर्दछ-सामान्यतया गैर-फ्लोटेड तत्व मात्र एक सानो मात्रामा ठाउँ प्रदान गर्दछ। त्यसैले तपाईले सधैँ फ्लोटेड तत्वहरूमा चौडाइ परिभाषित गर्नुपर्छ।
- यदि कंटेनर तत्व एचटीएमएल तत्व हो भने, फ्लोटेड DIV पृष्ठको बायाँ मार्जिनमा बस्नेछ।
- यदि कन्टेनर तत्त्वले केहि अन्यद्वारा समावेश गर्दछ भने, फ्लोटेड डीआई कन्टेनरको बाँया मार्जमा बस्नेछ।
- तपाईं फ्लोटेड तत्वहरू घोंघ्न सक्नुहुन्छ, र यसले फ्लोटमा एक आश्चर्यजनक स्थानमा अन्त्य गर्न सक्छ। उदाहरणको लागि, यो फ्लोट एक दायाँ फ्लोटेड DIV हो दायाँ फ्लोटेड डीआई भित्र।
- यदि कन्टेनरमा कोठा छ भने फ्लोटेड तत्वहरू एकअर्कासँग बस्नेछन्। उदाहरणको लागि, यो कन्टेनरसँग 400px चौडा कन्टेनरमा तीन 100px चौडाई DIV तत्वहरू छन्।
तपाईं फोटो गैलरी लेआउट सिर्जना गर्न पनि फ्लोट्स प्रयोग गर्न सक्नुहुनेछ। तपाइँ प्रत्येक थंबनेल राख्नुहोस् (यो सबै राम्रो हो जब तिनीहरू सबै आकार हुन्) DIV मा क्याप्शन र डिटेनरमा DIV तत्वहरू फ्लोटमा।
जे भएपनि ब्राउजर सञ्झ्याल कति ठूलो छ, थम्बनेलहरू समानरूपमा रेखांकन हुनेछन्।
फ्लोट बन्द गर्दै
एकपटक तपाईं फ्लोटमा एक तत्व कसरी गर्ने भनेर थाहा पाउँदा, फ्लोट कसरी बन्द गर्ने भन्ने बारे जान्न महत्त्वपूर्ण छ। तपाइँ फ्लोट CSS स्पष्ट सम्पत्तिको साथ बन्द गर्नुहुन्छ। तपाइँ बायाँ फ्लोट्स, दायाँ फ्लोट वा दुवै खाली गर्न सक्नुहुनेछ:
स्पष्ट: बायाँ;
स्पष्ट: दायाँ;
स्पष्ट: दुवै;
कुनै पनि तत्व जो तपाईंले स्पष्टको लागि स्पष्ट गुण सेट गर्नुभएका तत्वहरू तल देखा पर्ने तत्वहरू तल दिइएका तत्वहरू हुन्। उदाहरणका लागि, यस उदाहरणमा पाठको पहिलो दुई अनुच्छेद खाली गरिएको छैन, तर तेस्रो हो।
विभिन्न कागजातहरूको विभिन्न तत्वहरूको स्पष्ट मूल्यसँग प्ले गर्नुहोस् विभिन्न लेआउट प्रभावहरू प्राप्त गर्न।
एउटा सबैभन्दा रोचक फ्लोटेड लेआउटहरू पाठहरूको एक श्रृंखला हो जुन पाठको अनुच्छेदको पछि दाँया वा बाँया स्तम्भ तल। भित्री छवि अघिल्लो पटक स्क्रोल गर्न पर्याप्त नभएसम्म यदि तपाईं अघिल्लो तस्बिरको बगलमा स्तम्भमा देखा पर्नुको लागि सबै तस्बिरहरूमा खाली प्रयोग गर्न सक्नुहुनेछ।
HTML (यस अनुच्छेद दोहोर्याउनुहोस्):
दुई घन्टा को एक्यूवर डोरोर सिल्वर को अस्थायी अस्थायी अस्थिरता मा volrehtate मा गर्छन। कामोत्तेजक गैर प्रवासी, प्रयोगशाला र डेलोर मैनेजमेंट।
सीएसएस (बायाँ तिर बायाँ घुमाउन):
img.float {फ्लोट: बायाँ;
स्पष्ट: बायाँ;
मार्जिन: 5px;
}
र दायाँतिर:
img.float {फ्लोट: दायाँ;
स्पष्ट: दायाँ;
मार्जिन: 5px;
}
लेआउटको लागि फ्लोटहरू प्रयोग गर्दै
एकपटक तपाईंले फ्लोट सम्पत्ती कसरी काम गर्दछ भनेर बुझ्नुहुन्छ, तपाइँ आफ्नो वेब पृष्ठहरू निकाल्न प्रयोग गर्न सक्नुहुनेछ। यी फिक्स्ड वेब पृष्ठ सिर्जना गर्ने यी चरणहरू हुन्:
- लेआउट डिजाइन गर्नुहोस् (पेपरमा वा ग्राफिक्स उपकरणमा वा मेरो टाउकोमा)।
- पृष्ठ डिभिजनहरू कहाँ जाँदैछन् निर्धारण गर्नुहोस्।
- विभिन्न कन्टेनरहरूको चौडाइ र तिनीहरूका तत्वहरू निर्धारण गर्नुहोस्।
- सबैलाई फ्लोट गर्नुहोस्। बाहिरी बाहिरी कन्टेनर तत्त्वलाई बायाँतिर सारिएको छ त्यसैले मलाई थाहा छ कि यो ब्राउजर दृश्य पोर्टको सन्दर्भमा हुनेछ।
जबसम्म तपाईं आफ्नो लेआउट खण्डहरूको चौडाइ (प्रतिशतहरू ठीक छन्) जान्नुहुन्छ, तपाईंले पृष्ठमा रहेका उनीहरूलाई राख्नुको लागि फ्लोट सम्पत्ती प्रयोग गर्न सक्नुहुनेछ। र राम्रो कुरा हो, तपाईंलाई चिन्ता गर्नु हुँदैन कि बक्स मोडेल इन्टरनेट एक्सप्लोरर वा फायरफक्स को लागी फरक फरक छ।