आइए साइट के ग्रिड डिज़ाइन पर एक नज़र डालें और अलग-अलग घटकों को तोड़ें। आइए जानें कि फ्लोट इतना उपयोगी क्यों है, साथ ही तीन धाराओं और साइट फुटर से पहली वेब ग्रिड बनाने की लोकप्रिय तकनीक।
किसी साइट के ग्रिड निर्माण का अध्ययन करने के लिए, आपको यह समझने की आवश्यकता है कि "प्रवाह" क्या है। प्रवाह एक के बाद एक स्थित साइट के तत्व हैं। उदाहरण के लिए, ये डिव तत्व हो सकते हैं जो डिफ़ॉल्ट रूप से एक के बाद एक जाते हैं। लेकिन प्रवाह को पुनर्व्यवस्थित किया जा सकता है, और ब्लॉक तत्वों की स्थिति को बदला जा सकता है।
प्रवाह को नियंत्रित करने के लिए, हम फ्लोट संपत्ति का उपयोग करते हैं, जो ब्लॉक को बाईं या दाईं ओर रख सकता है। CSS फ़ाइल में लिखना पर्याप्त है:
"वर्ग या ब्लॉक का नाम" {फ्लोट: दाएं / बाएं; }
फ्लोट का एकमात्र दोष एक ब्लॉक को दूसरे के ऊपर "ओवरलैप" करने की क्षमता है।
भागने से बचने के लिए, हम स्पष्ट: दोनों का उपयोग करते हैं - यह संपत्ति ब्लॉक के चारों ओर प्रवाह निर्धारित करेगी। हम चौड़ाई और ऊंचाई को अधिकतम और न्यूनतम के रूप में सेट करते हैं, ताकि मान सामग्री के आकार (पाठ, छवियों) के अनुसार बने। मार्जिन - मान को ऑटो पर सेट करें ताकि ब्लॉक के स्थान के आधार पर बाहरी मार्जिन स्वचालित रूप से बन जाए।
चूंकि फ्लोट ब्लॉक को दो दिशाओं में रख सकता है, यह साइट को धाराओं में विभाजित करने के लिए प्रथागत है - बाएं और दाएं। यदि प्रोग्रामर को केवल दो स्ट्रीम की आवश्यकता होती है, तो वह बाएँ और दाएँ फ़्लोट को छोड़ देता है, लेकिन यदि दो से अधिक हैं, तो वह मार्जिन का उपयोग करके मार्जिन को समायोजित करता है। यह कैसे होता है:
.column1 {फ्लोट: लेफ्ट; चौड़ाई: 65px; न्यूनतम ऊंचाई: 50px; मार्जिन-दाएं: 9px; // 9px केंद्र बॉक्स से}
2 धारा:
.column2 {फ्लोट: लेफ्ट; // बाएं ब्लॉक में, लेकिन "अतिव्यापी" के बिना, चूंकि हमने मार्जिन चौड़ाई: 80px; न्यूनतम ऊंचाई: 50px; }
3 धारा:
.column3 {फ्लोट: दाएं; चौड़ाई: 65px; न्यूनतम ऊंचाई: 50px; }
पाद लेख से निपटना (.footer):
.पाद लेख {स्पष्ट: दोनों; // दोनों पक्षों के चारों ओर लपेटें}
इस तरह हमने तीन धाराओं से मिलकर फ्लोट का उपयोग करके साइट के लिए एक ग्रिड बनाया।
