HTML में अगल-बगल में बाक्स साइड कैसे प्रदर्शित करें

अतीत में, कई वेबसाइटें पृष्ठों को बिछाने के लिए HTML तालिकाओं का उपयोग करती थीं क्योंकि यह विधि पुराने वेब ब्राउज़र में लगातार विश्वसनीय परिणाम उत्पन्न करती थी। यह एक आदर्श समाधान नहीं था, क्योंकि सारणी वास्तव में ले आउट पेज के बजाय सारणीबद्ध डेटा प्रदर्शित करने के लिए होती है। तालिकाओं का उपयोग करने का मतलब यह भी था कि लेआउट को पृष्ठ में हार्ड-कोडित किया गया था, जिससे साइट को अधिक समय लेने वाली बनाने का कार्य अधिक समय लेने वाला था। कैस्केडिंग स्टाइल शीट्स ने "फ्लोट" संपत्ति पेश की, जिससे डिजाइनरों को बाएं या दाएं तत्वों को फ्लोट करने की अनुमति मिलती है। यह पृष्ठ पर अधिक नियंत्रण की अनुमति देता है और साइट लेआउट को सामग्री से अलग रखने का अतिरिक्त लाभ है।

1।

एक पाठ संपादक या HTML संपादक खोलें और एक नया HTML दस्तावेज़ बनाएँ।

2।

पेज बॉडी में निम्नलिखित कोड जोड़ें:

यह पहली div में पाठ है। यह दूसरे div में पाठ है

पृष्ठ को सहेजें और इसे अपने वेब ब्राउज़र में खोलें। आप देखेंगे कि पहली div में सामग्री के अंतर्गत दूसरी div में सामग्री प्रदर्शित की गई है।

3।

अपने HTML दस्तावेज़ के अनुभाग में निम्नलिखित सीएसएस कोड डालें:

परिवर्तनों को प्रदर्शित करने के लिए पृष्ठ को सहेजें और अपने ब्राउज़र में ताज़ा करें। CSS नियम "myContainer" div के भीतर निहित दोनों divs को लक्षित करता है। "फ्लोट" संपत्ति ब्राउज़र को बाईं ओर फ्लोट्स को फ्लोट करने के लिए कहती है - आप फ्लोट वैल्यू को "राइट" में बदल सकते हैं, जिसमें डिवाइसेज़ के राइट किनारे पर फ्लोट्स को फ्लोट कर सकते हैं। Div 300 पिक्सेल की निश्चित चौड़ाई पर सेट हैं और लेआउट को देखने के लिए आसान बनाने के लिए 1-पिक्सेल ब्लैक बॉर्डर है। आपके ब्राउज़र में, आप देखेंगे कि बक्से अब एक तरफ से प्रदर्शित होते हैं।

4।

नीचे दी गई जानकारी के अनुसार, "myContainer" div के बाहर, पेज बॉडी में एक तीसरी div जोड़ें:

यह पहली div में पाठ है। यह दूसरे div में पाठ है। यह तीसरे div में पाठ है

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

5।

निम्नलिखित नियम को पेज के प्रमुख भाग में स्टाइल सेक्शन में डालें:

myFooter {

clear: both;

}

यह तीसरे "myFooter" div को लक्षित करता है और ब्राउज़र को फ्लोट को बंद करने और "myContainer" div के नीचे के HTML तत्वों को प्रदर्शित करने के लिए कहता है। पेज को सेव और रिफ्रेश करें। आप देखेंगे कि तीसरा div द्वारा बनाया गया पाद अब फ्लोट किए गए divs के नीचे प्रदर्शित होता है।