इमेज के चारों ओर टेक्स्ट रैप करने का कोड चाहिए? नॉर्मली HTML पेज बनाते समय सब लीनियरली फ्लो करता है — एक ब्लॉक सीधे दूसरे के बाद। मेरे पिछले सभी पोस्ट इसके उदाहरण हैं: टेक्स्ट, फिर पिक्चर, फिर टेक्स्ट, आदि।
कभी-कभी इमेज के बगल में टेक्स्ट शामिल करना चाहते हैं, नीचे नहीं। इसे इमेज के चारों ओर टेक्स्ट रैप करना कहते हैं। HTML से टेक्स्ट रैप करना वास्तव में काफी आसान है। ध्यान दें: इसके लिए CSS इस्तेमाल करना जरूरी नहीं।
हालांकि आजकल W3C HTML के बजाय CSS इस्तेमाल करने की सलाह देता है। दोनों मेथड नीचे बताऊंगा, लेकिन CSS बेहतर है क्योंकि यह रिस्पॉन्सिव वेबसाइट डिजाइन के लिए ज्यादा एडाप्टेबल है।
HTML से इमेज के चारों ओर टेक्स्ट रैप करें
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
इमेज के राइट साइड पर टेक्स्ट रैप कराने के लिए पिक्चर को लेफ्ट अलाइन करें:
<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>
अगर टेक्स्ट लेफ्ट और इमेज राइट पर चाहते हैं, तो align पैरामीटर "right" कर दें।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>
बस! काफी आसान है न? केवल तब CSS इस्तेमाल करना चाहेंगे जब इमेज पर मार्जिन जोड़ने हों, ताकि टेक्स्ट और इमेज के बीच स्पेस हो।
CSS स्टाइलिंग कोड से पिक्चर पर मार्जिन जोड़ें:
<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
ऊपर कोड MARGIN CSS एलिमेंट से राइट साइड पर 10 पिक्सल व्हाइटस्पेस जोड़ता है। चूंकि इमेज लेफ्ट अलाइन है, इसलिए राइट पर व्हाइटस्पेस चाहिए।
चार नंबर TOP RIGHT BOTTOM LEFT रिप्रेजेंट करते हैं। राइट-अलाइंड इमेज पर व्हाइटस्पेस लेफ्ट साइड चाहिए तो:
<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
HTML से यह टास्क परफॉर्म करना सिंपल है, लेकिन रिस्पॉन्सिव साइट्स के लिए अच्छा नहीं हो सकता।
CSS से इमेज के चारों ओर टेक्स्ट रैप करें
इमेज के चारों ओर टेक्स्ट रैप करने का बेहतर तरीका CSS है। यह एलिमेंट की पोजिशनिंग पर ज्यादा फाइन-ग्रेन कंट्रोल देता है और मॉडर्न कोडिंग स्टैंडर्ड के साथ बेहतर काम करता है।
<img src="IMAGE URL" alt="A photo" class="left" />
भले ही HTML उदाहरण में CSS सीधे इमेज टैग में शामिल किया, लेकिन आजकल ऐसा भी नहीं करना चाहिए। इसके बजाय अलग फाइल (स्टाइलशीट) होनी चाहिए जिसमें सारा CSS कोड हो।
IMG टैग में बस क्लास असाइन करके नाम दें। मेरे उदाहरण में क्लास नाम left रखा। स्टाइलशीट में बस यह कोड जोड़ें:
.left { float: left; padding: 0 10px 0 0;}
जैसा दिख रहा है, लेफ्ट-अलाइंड इमेज के राइट साइड पर 10px पैडिंग जोड़ी। float प्रॉपर्टी से इमेज को डॉक्यूमेंट के नॉर्मल फ्लो से निकालकर पैरेंट कंटेनर के लेफ्ट साइड पर रखा।
यह IMG टैग में सारा कोड डालने से ज्यादा क्लीन है। मैनेज करना भी आसान है और वेबपेज पर लुक कस्टमाइज़ करने के लिए ज्यादा CSS प्रॉपर्टी इस्तेमाल कर सकते हैं। सवाल हों तो कमेंट करें।
