एक छवि के चारों ओर पाठ लपेटने के लिए कोड की आवश्यकता है? आम तौर पर जब आप एक HTML पृष्ठ बनाते हैं, तो सब कुछ रैखिक रूप से बहता है, जिसका अर्थ है एक के बाद एक सीधे ब्लॉक। मेरी पिछली सभी पोस्टें इसका एक उदाहरण हैं, यानी टेक्स्ट, फिर पिक्चर, फिर टेक्स्ट आदि।
कभी-कभी आप एक छवि के बगल में पाठ को नीचे के बजाय शामिल करना चाह सकते हैं। इसे इमेज के चारों ओर रैपिंग टेक्स्ट कहा जाता है। HTML का उपयोग करके टेक्स्ट को लपेटना वास्तव में काफी आसान है। ध्यान दें कि पाठ को लपेटने के लिए आपको CSS का उपयोग नहीं करना है।
हालाँकि, इन दिनों W3C इस प्रकार के कार्यों के लिए HTML के बजाय CSS का उपयोग करने की सलाह देता है। मैं नीचे दोनों विधियों का उल्लेख करूंगा, लेकिन यदि आप कर सकते हैं, तो CSS का उपयोग करना बेहतर है क्योंकि यह उत्तरदायी वेबसाइट डिजाइनों के लिए अधिक अनुकूल है।
HTML का उपयोग करके छवि के चारों ओर पाठ लपेटें
लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। फुस्स हुक्म ग्रेविडा एनिम, क्विस अल्ट्रैसिस मौरिस पॉस्यूअर क्विस। डुइस adipiscing tincidunt सागिटिस। सह sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus। एलिकम ए फेलिस विटै अगे लोबोर्टिस डिक्टम। करैबितुर मोलेस्टी पोज़ेरे लॉरेट। लोरेम इजेस्टस नॉन एम्पिडिएट एनिम कॉनग में यूट पाइरेल्सेक ननक।
छवि के दाईं ओर पाठ लपेटने के लिए, आपको चित्र को बाईं ओर संरेखित करना होगा:
आपका पाठ यहाँ जाता है।
यदि आप चाहते हैं कि पाठ बाईं ओर और छवि दाईं ओर दिखाई दे, तो संरेखित पैरामीटर को "दाएं" में बदलें।
लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। फुस्स हुक्म ग्रेविडा एनिम, क्विस अल्ट्रैसिस मौरिस पॉस्यूअर क्विस। डुइस adipiscing tincidunt सागिटिस। सह sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus। एलिकम ए फेलिस विटै अगे लोबोर्टिस डिक्टम। करैबितुर मोलेस्टी पोज़ेरे लॉरेट। लोरेम इजेस्टस नॉन एम्पिडिएट एनिम कॉनग में यूट पाइरेल्सेक ननक।
आपका पाठ यहाँ जाता है।
बस! बहुत आसान सही है? केवल तभी आप सीएसएस का उपयोग करना चाहते हैं यदि आप चित्रों में हाशिये जोड़ना चाहते हैं, ताकि पाठ और छवि के बीच कुछ जगह हो।
आप निम्नलिखित CSS स्टाइलिंग कोड का उपयोग करके चित्र में हाशिये को जोड़ सकते हैं:
आपका पाठ यहाँ जाता है।
उपरोक्त कोड छवि के दाईं ओर 10 पिक्सेल व्हॉट्सएप जोड़ने के लिए MARGIN CSS तत्व का उपयोग करता है। चूंकि हमने बाईं छवि को संरेखित किया है, इसलिए हम व्हाट्सएप को दाईं ओर जोड़ना चाहते हैं।
मूल रूप से, चार नंबर TOP ROT BOTTOM LEFT का प्रतिनिधित्व करते हैं। इसलिए यदि आप एक सम्मिलित छवि में सफेद स्थान जोड़ना चाहते हैं, तो आप ऐसा करेंगे:
आपका पाठ यहाँ जाता है।
इसलिए यह कार्य करने के लिए HTML का उपयोग करना काफी सरल है, लेकिन एक बार फिर, यह उत्तरदायी साइटों के लिए अच्छी तरह से काम नहीं कर सकता है।
सीएसएस का उपयोग करके छवि के चारों ओर लपेटें पाठ
एक छवि के चारों ओर पाठ लपेटने का बेहतर तरीका सीएसएस का उपयोग करना है। यह आपको तत्वों की स्थिति पर अधिक महीन अनाज नियंत्रण देता है और आधुनिक कोडिंग मानकों के साथ बेहतर काम करता है।
भले ही मैंने CSS को HTML उदाहरण में छवि टैग में सीधे शामिल किया है, आपको वास्तव में कभी भी ऐसा नहीं करना चाहिए। इसके बजाय, आपके पास एक अलग फ़ाइल होनी चाहिए जिसे एक स्टाइलशीट कहा जाता है जो आपके सभी सीएसएस कोड को रखती है।
IMG टैग में, आप टैग को एक वर्ग असाइन करते हैं और उसे एक नाम देते हैं। मेरे उदाहरण में, मैंने कक्षा का नाम छोड़ दिया । मेरी स्टाइलशीट में, मुझे केवल इतना करना है कि निम्नलिखित कोड जोड़ें:
.left {फ्लोट: बाएं; गद्दी: 0 10px 0 0 ;; जैसा कि आप देख सकते हैं, मैंने बाईं ओर संरेखित छवि के दाईं ओर पैडिंग के 10px को जोड़ा। मैंने दस्तावेज़ के सामान्य प्रवाह से छवि को स्थानांतरित करने के लिए फ्लोट संपत्ति का उपयोग किया और इसे मूल कंटेनर के बाईं ओर रख दिया।
जैसा कि आप देख सकते हैं, यह IMG टैग के सभी कोड को जोड़ने की तुलना में बहुत साफ है। इसे प्रबंधित करना भी आसान है और आप अपने वेबपेज पर नज़र को अनुकूलित करने के लिए बहुत अधिक सीएसएस गुणों का उपयोग कर सकते हैं। यदि आपके कोई प्रश्न हैं, तो बेझिझक टिप्पणी करें। का आनंद लें!
