वेबपेजमा पाठको बायाँमा छवि फ्लोट कसरी गर्ने?

वेबपृष्ठ को बायाँ छेउमा एउटा छवि पङ्क्तिबद्ध गर्न CSS प्रयोग गर्दै

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

त्यो पाठ र ती छविहरू बनाउन को लागी एकदम राम्रो संग काम गर्दछ कुन राम्रो वेब डिजाइनरहरू अलग गर्दछ? तपाईं केवल आफ्नो पाठ र छविहरू अर्को पछि एक पछि देखा पर्न चाहनुहुन्न, जुन यी ब्लक-स्तर तत्वहरू पूर्वनिर्धारित रूपमा लेआउट हुनेछ। नहीं, तपाईं केहि वेबसाइट मा कसरि पाठ र छवियों को एक साथ प्रवाह मा नियंत्रण चाहते हो अंततः तपाईंको वेबसाइट को दृश्य डिजाइन हुनेछ।

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

HTML को साथ सुरू गर्नुहोस्

तपाईंले गर्नुपर्नेछ भन्ने पहिलो कुरासँगसँग केहि काम गर्न HTML छ। हाम्रो उदाहरणको लागि, हामी पाठको अनुच्छेद लेख्दछौं र अनुच्छेदको सुरुवातमा छवि थप्नुहोस् (पाठ भन्दा अघि, तर खोल्ने

ट्याग पछि)। यहाँ के हो जुन HTML मार्कअप जस्तो देखिन्छ:

अनुच्छेदको पाठ यहाँ जान्छ। यस उदाहरणमा, हामीसँग हेडसट फोटोको छवि छ, त्यसैले यो पाठ सम्भवतः व्यक्तिको बारेमा हुनेछ जुन हेडलाइटको लागि हो।

पूर्वनिर्धारित रूपमा, हाम्रो वेबपृष्ठले पाठ माथिको छविको साथ प्रदर्शन गर्नेछ। यो किनभने किनभने छविहरू एचटीएमएलमा ब्लक-स्तर तत्वहरू हुन्। यो ब्राउजर पूर्वनिर्धारित रूपमा छवि तत्व पहिले र पछि पछि रेखा ब्रेक देखाउँछ। हामी सीएसएस चालू गरेर यो पूर्वनिर्धारित दृश्य परिवर्तन गर्नेछौं। पहिलो, तथापि, हामी हाम्रो छवि तत्वको एक क्लास मान जोड्छौं । त्यो कक्षाले "हुक" को रूपमा कार्य गर्नेछ जुन हामीले हाम्रो CSS मा प्रयोग गर्नेछौं।

अनुच्छेदको पाठ यहाँ जान्छ। यस उदाहरणमा, हामीसँग हेडसट फोटोको छवि छ, त्यसैले यो पाठ सम्भवतः व्यक्तिको बारेमा हुनेछ जुन हेडलाइटको लागि हो।

ध्यान दिनुहोस् कि "बायाँ" को यो कक्षा आफ्नै मा केहि पनि छैन! हाम्रो इच्छित शैली प्राप्त गर्न को लागी, हामी अगाडी CSS को उपयोग गर्न आवश्यक छ।

CSS Styles

हाम्रो एचटीटीएलको साथ, "बायाँ" को हाम्रो क्लास विशेषता सहित, अब हामी सीएसएसमा फर्कन सक्छौं। हामी हाम्रो शैली शैलीमा नियम थप्दछौं जुन त्यो छवि फ्लोट गर्दछ र यसको पछि अर्को सानो पछाडि थप्न सकिन्छ ताकि जुन अन्तिम पाठको वरिपरि लम्किएको पाठले यो पनि नजिकका साथ बटाउन सक्दैन। यहाँ तपाईले लेख्न सक्नुहुनेछ CSS:

.left {फ्लोट: बायाँ; padding: 0 20px 20px 0; }

यस शैलीले छविलाई बायाँ तिर निस्कन्छ र सानोको तल (थोडा प्याडिङ प्रयोग गर्दै) छविको दाँया र तल्लोमा थप्छ।

यदि तपाईँले ब्राउजरमा यो एचटीएमएलमा रहेको पृष्ठको समीक्षा गर्नुभयो भने, छवि अब बायाँमा पङ्क्तिबद्ध हुनेछ र अनुच्छेदको पाठ यसको बीचमा उचित मात्रामा स्पेसिङको साथ देखाइने छ। हामीले प्रयोग गरेको "बायाँ" को क्लास मान यादृच्छिक हो। हामी यसलाई केहि बोलाउन सक्दछ किनभने "बायाँ" शब्द यसको आफ्नै मा केही छैन। यो एचटीएमएलमा एक क्लास विशेषता हुन आवश्यक छ जुन वास्तविक सीएसएस स्टाइलसँग काम गर्दछ जुन तपाइँले खोज्नु भएको दृश्य परिवर्तनहरू गर्दछ।

यी शैलीहरू प्राप्त गर्न वैकल्पिक तरिका

छवि तत्व प्रदान गर्ने यो दृष्टिकोण एक क्लास विशेषता र त्यसपछि एक साधारण CSS शैली प्रयोग गरेर जुन तत्व फ्लोट मात्र एक तरिका हो जुन तपाईंले "बायाँ पङ्क्ति छवि" हेर्न सक्नुहुन्छ। तपाईं पनि एक विशिष्ट विशिष्टता लेखेर एसएसएससँग छवि र शैलीको क्लाउड मान पनि लिन सक्नुहुनेछ। उदाहरणका लागि, चलो उदाहरणको रूपमा हेर्नुहोला कि छवि छवि "डिभाइस-सामग्री" को क्लास मानको साथ विभाजनको भित्र हो।