ब्लॉक-स्तरीय तत्व एक वेब पेज में अनुक्रमिक क्रम में दिखाई देते हैं। पृष्ठ की उपस्थिति या उपयोगिता को बेहतर बनाने के लिए, आप छवियों सहित ब्लॉकों को लपेटकर उस क्रम को संशोधित कर सकते हैं, ताकि छवियों के चारों ओर पाठ प्रवाहित होता है.
वेब डिज़ाइन के संदर्भ में, इस प्रभाव को फ्लोटिंग इमेज के रूप में जाना जाता है। यह के साथ हासिल किया गया है सीएसएस संपत्तिनाव, जो पाठ को बाईं ओर संरेखित छवि के दाईं ओर (या बाईं ओर दाईं ओर संरेखित छवि के चारों ओर) प्रवाहित करने की अनुमति देता है।
एचटीएमएल से शुरू करें
यह उदाहरण अनुच्छेद की शुरुआत में एक छवि जोड़ता है (पाठ से पहले, लेकिन उद्घाटन के बाद
टैग)। यहाँ प्रारंभिक HTML मार्कअप है:
पैराग्राफ का पाठ यहां जाता है। इस उदाहरण में, हमारे पास एक हेडशॉट फ़ोटो की छवि है, इसलिए यह टेक्स्ट हेडशॉट में व्यक्ति का वर्णन कर सकता है।
डिफ़ॉल्ट रूप से, पृष्ठ पाठ के ऊपर की छवि के साथ प्रदर्शित होगा, क्योंकि छवियां HTML में ब्लॉक-स्तरीय तत्व हैं। इसका मतलब है कि ब्राउज़र डिफ़ॉल्ट रूप से छवि तत्व से पहले और बाद में लाइन ब्रेक प्रदर्शित करता है। CSS का उपयोग करके इस डिफ़ॉल्ट रूप को बदलने के लिए, एक वर्ग मान जोड़ें (
बाएं) छवि तत्व के लिए एक हुक के रूप में सेवा करने के लिए जिसमें गुण संलग्न किए जा सकते हैं।पैराग्राफ का पाठ यहां जाता है। इस उदाहरण में, हमारे पास एक हेडशॉट फ़ोटो की छवि है, इसलिए यह टेक्स्ट हेडशॉट में व्यक्ति का वर्णन कर सकता है।
ध्यान दें कि यह वर्ग अपने आप कुछ नहीं करता है। सीएसएस वांछित शैली प्राप्त करेंगे।
सीएसएस शैलियाँ जोड़ना
इस नियम को साइट के में जोड़ें शैली पत्रक:
।बाएं {
बाईंओर तैरना;
पैडिंग: 0 20px 20px 0;
}
यह शैली कक्षा के साथ कुछ भी तैरती है बाएं पृष्ठ के बाईं ओर और थोड़ा जोड़ता है गद्दी छवि के दाईं ओर और नीचे की ओर ताकि पाठ इसके ठीक ऊपर न झुके।
एक ब्राउज़र में, छवि अब बाईं ओर संरेखित होगी; टेक्स्ट दोनों के बीच की जगह के साथ इसके दाईं ओर दिखाई देगा।
वर्ग मूल्य ।बाएं यहाँ प्रयोग मनमाना है। आप इसे कुछ भी कह सकते हैं जिसे आप चुनते हैं क्योंकि यह अपने आप कुछ नहीं करता है। हालांकि, आपको यह भी नहीं करना चाहिए कि सीएसएस में आपके द्वारा बदला गया कोई भी मूल्य HTML में भी दिखाई दे।
इन शैलियों को प्राप्त करने के अन्य तरीके
आप छवि के वर्ग मूल्य को भी हटा सकते हैं और अधिक विशिष्ट चयनकर्ता लिखकर इसे सीएसएस के साथ स्टाइल कर सकते हैं। नीचे दिए गए उदाहरण में, छवि a. के साथ एक विभाजन के अंदर है मुख्य सामग्री वर्ग मूल्य।
पैराग्राफ का पाठ यहां जाता है। इस उदाहरण में, हमारे पास एक हेडशॉट फ़ोटो की छवि है, इसलिए यह टेक्स्ट हेडशॉट में व्यक्ति का वर्णन कर सकता है।
इस छवि को स्टाइल करने के लिए, यह सीएसएस लिखें:
मुख्य सामग्री img {
बाईंओर तैरना;
पैडिंग: 0 20px 20px 0;
}
इस परिदृश्य में, छवि को बाईं ओर संरेखित किया जाता है, पाठ इसके चारों ओर पहले की तरह तैरता है, लेकिन मार्कअप में अतिरिक्त वर्ग मान के बिना। इसे बड़े पैमाने पर करने से एक छोटी HTML फ़ाइल बनाने में मदद मिल सकती है, जिसे प्रबंधित करना आसान होगा और प्रदर्शन में सुधार हो सकता है।
इनलाइन शैलियों से बचें
अंत में, आप उपयोग कर सकते हैं इनलाइन शैलियाँ:
पैराग्राफ का पाठ यहां जाता है। इस उदाहरण में, हमारे पास एक हेडशॉट फ़ोटो की छवि है, इसलिए यह टेक्स्ट हेडशॉट में व्यक्ति का वर्णन कर सकता है।
हालांकि, यह उचित नहीं है, क्योंकि यह किसी तत्व की शैली को उसके संरचनात्मक मार्कअप के साथ जोड़ती है। सर्वोत्तम प्रथाएं तय करती हैं कि किसी पृष्ठ की शैली और संरचना अलग रहती है। यह अलगाव विशेष रूप से तब सहायक होता है जब आपको पृष्ठ के लेआउट को बदलने और एक प्रतिक्रियाशील वेबसाइट के साथ विभिन्न स्क्रीन आकारों और उपकरणों की तलाश करने की आवश्यकता होती है।
HTML के साथ पृष्ठ की शैली को आपस में जोड़ने से मीडिया प्रश्नों का संलेखन विभिन्न स्क्रीनों के लिए अपनी साइट को समायोजित करना अधिक कठिन है।