किसी छवि के चारों ओर पाठ लपेटने के लिए कोड की आवश्यकता है? आम तौर पर जब आप एक HTML पृष्ठ बनाते हैं, तो सब कुछ रैखिक रूप से बहता है, जिसका मतलब है कि एक ब्लॉक सीधे दूसरे के बाद होता है। मेरे पिछले सभी पोस्ट इस का एक उदाहरण हैं, यानी पाठ, फिर चित्र, फिर पाठ, आदि।
कभी-कभी आप इसके नीचे की बजाय किसी छवि के आगे टेक्स्ट शामिल करना चाह सकते हैं। इसे छवि के चारों ओर लपेटने वाला पाठ कहा जाता है। HTML का उपयोग करके पाठ को लपेटना वास्तव में काफी आसान है। ध्यान दें कि पाठ को लपेटने के लिए आपको सीएसएस का उपयोग करने की आवश्यकता नहीं है।
हालांकि, इन दिनों डब्ल्यू 3 सी एचटीएमएल के बजाय सीएसएस का उपयोग करने की सिफारिश करता है इस तरह के कार्यों के लिए। मैं नीचे दोनों विधियों का उल्लेख करूंगा, लेकिन यदि आप कर सकते हैं, तो सीएसएस का उपयोग करना बेहतर है क्योंकि यह उत्तरदायी वेबसाइट डिज़ाइन के लिए अधिक अनुकूल है।
HTML का उपयोग करके छवि के आसपास टेक्स्ट लपेटें
Lorem ipsum dolor sit amet, consectetur adipiscing elit। Fusce dictum gimida enim, quis ultricies mauris posuere quis। ड्यूस adipiscing tincidunt sagittis। सह सोसाइटी natoque penatibus और magnis dis parturient montes, nascetur ridiculus mus। Aliquam एक felis vitae augue lobortis dictum। Curabitur molestie posuere laoreet। यदि आप छवि के दाईं ओर टेक्स्ट रैप रखने के लिए, आपको चित्र को बाईं ओर संरेखित करना होगा:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
यदि आप बाईं ओर टेक्स्ट को दिखाना चाहते हैं और छवि को दाईं ओर दिखाई देने के लिए, बस संरेखण पैरामीटर को "दाएं" में बदलें।
Lorem ipsum dolor sit amet, consectetur adipiscing elit। Fusce dictum gimida enim, quis ultricies mauris posuere quis। ड्यूस adipiscing tincidunt sagittis। सह सोसाइटी natoque penatibus और magnis dis parturient montes, nascetur ridiculus mus। Aliquam एक felis vitae augue lobortis dictum। Curabitur molestie posuere laoreet। यूट्यूब में नॉनकॉर्ड्स एन कॉम्यूज के साथ गैर-अनिवार्य है।
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
यही वह है! बहुत आसान सही है? सीएसएस का उपयोग करने का एकमात्र समय यह है कि यदि आप चित्रों में मार्जिन जोड़ना चाहते हैं, तो टेक्स्ट और छवि के बीच कुछ जगह हो।
आप चित्र का उपयोग कर चित्र में मार्जिन जोड़ सकते हैं निम्नलिखित सीएसएस स्टाइल कोड:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
उपर्युक्त कोड छवि के दाहिने तरफ 10 पिक्सल व्हाइटस्पेस जोड़ने के लिए मार्जिन सीएसएस तत्व का उपयोग करता है। चूंकि हमने छवि को बाईं ओर गठबंधन किया है, इसलिए हम दाएं स्थान को दाईं ओर जोड़ना चाहते हैं।
असल में, चार संख्याएं शीर्ष दाएं बोटम बाएं का प्रतिनिधित्व करती हैं। तो यदि आप दाएं-गठबंधन छवि में श्वेत स्थान जोड़ना चाहते हैं, तो आप यह करेंगे:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
तो यह कार्य करने के लिए HTML का उपयोग करना काफी आसान है, लेकिन एक बार फिर, यह उत्तरदायी साइटों के लिए अच्छी तरह से काम नहीं कर सकता है।
सीएसएस का उपयोग कर छवि के चारों ओर पाठ लपेटें
किसी छवि के चारों ओर पाठ लपेटने का बेहतर तरीका सीएसएस का उपयोग करना है। यह आपको तत्वों की स्थिति पर अधिक बढ़िया अनाज नियंत्रण देता है और आधुनिक कोडिंग मानकों के साथ बेहतर काम करता है।
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
भले ही मैंने सीधे HTML टैग में छवि टैग में सीएसएस शामिल किया हो , आपको वास्तव में ऐसा कभी नहीं करना चाहिए। इसके बजाए, आपके पास एक स्टाइलशीट नामक एक अलग फ़ाइल होनी चाहिए जिसमें आपका सभी सीएसएस कोड हो।
आईएमजी टैग में, आप बस टैग को कक्षा निर्दिष्ट करते हैं और इसे एक नाम देते हैं। मेरे उदाहरण में, मैंने वर्ग बाएंनाम दिया। मेरी स्टाइलशीट में, मुझे बस इतना करना है कि निम्न कोड जोड़ें:
.left {
float: left;
padding: 0 10px 0 0;}
जैसा कि आप देख सकते हैं, मैंने बाएं गठबंधन छवि के दाईं ओर 10px पैडिंग जोड़ा । मैंने छवि के सामान्य प्रवाह से छवि को स्थानांतरित करने के लिए फ्लोट प्रॉपर्टी का भी उपयोग किया और इसे मूल कंटेनर के बाईं ओर रखा।
जैसा कि आप देख सकते हैं, यह कोड को जोड़ने से कहीं अधिक क्लीनर है आईएमजी टैग के लिए ही। इसे प्रबंधित करना भी आसान है और आप अपने वेबपृष्ठ पर नजर डालने के लिए बहुत सी सीएसएस गुणों का उपयोग कर सकते हैं। यदि आपके कोई प्रश्न हैं, तो टिप्पणी करने के लिए स्वतंत्र महसूस करें। का आनंद लें!