धेरै वर्षको लागि, सीएसएस फ्लोटहरू फिक्री, अझैसम्म आवश्यक छ, वेबसाईट लेआउट सिर्जना गर्न घटक भएको छ। यदि तपाईंको डिजाइनले बहु स्तम्भहरूको लागि बुलायो भने, तपाइँ फ्लोट गर्न सक्नुभयो । यस विधिको समस्या यो हो कि, अविश्वसनीय सजिलै संग कि वेब डिजाईजर्स / विकासकर्ताहरूले जटिल साइट लेआउट सिर्जना गरी देखेका छन, सीएसएस फ्लोटहरू कहिल्यै यस तरिकामा प्रयोग गर्नको लागि कहिल्यै थिएनन्।
जब फ्लोट्स र सीएसएस पोजीटिङ् धेरै वर्षको लागि वेब डिजाईनमा एक स्थान छ भन्ने निश्चित छन्, सीएसएस ग्रिड र फ्लेक्सबक्स सहित नयाँ लेआउट प्रविधिहरू अब वेब डिजाइनरहरू आफ्नो साइट लेआउट सिर्जना गर्न नयाँ तरिकाहरू प्रदान गर्दै छन्। अर्को नयाँ रूपरेखा प्रविधि जसले देखाउँछ कि धेरै सम्भावनाहरू CSS बहुविध स्तम्भ हुन्।
सीएसएस स्तम्भहरू केही वर्षको लागि वरिपरि रहेको छ, तर पुरानो ब्राउजरहरूमा समर्थनको कमी (इन्टरनेट एक्सप्लोररको मुख्य संस्करणहरू) ले यी उत्पादनहरू प्रयोग गरेर उनीहरूको उत्पादन कार्यमा प्रयोग गर्न धेरै वेब प्रविधिहरू राखेका छन्।
IE को ती पुरानो संस्करणहरूको लागि समर्थनको अन्त्यमा, केहि वेब डिजाइनरहरू अब नयाँ CSS लेआउट विकल्पहरू प्रयोग गर्दै छन्, सीएसएस स्तम्भहरू समावेश छन्, र फेला पार्नुका साथै तिनीहरूसँग यी नयाँ दृष्टिकोणहरूको साथ धेरै नियन्त्रणहरू छन्।
सीएसएस स्तम्भहरूको आधारभूत
यसको नामले सुझाव दिन्छ, CSS बहुविध स्तम्भहरू (CSS3 बहु-स्तम्भ लेआउटको रूपमा पनि जान्दछन्) तपाईंलाई सामग्रीको सेटमा स्तम्भहरूमा विभाजन गर्न अनुमति दिन्छ। तपाईंले प्रयोग गर्नुहुने सबैभन्दा मुख्य CSS गुणहरू:
- स्तम्भ गणना
- स्तम्भ-अन्तर
स्तम्भ गणनाको लागि, तपाइँले तपाइँ चाहानु भएको स्तम्भहरूको संख्या निर्दिष्ट गर्नुहुन्छ। स्तम्भ अन्तरिक्ष ग्याल्टहरू वा ती स्तम्भहरू बीचको स्पेसिङ हुनेछ। ब्राउजरले यी मानहरू लिने र सामग्री निर्दिष्ट गरी स्तम्भहरूको संख्यामा विभाजित गर्नेछ।
अभ्यासमा बहुविध स्तम्भहरूको एक साधारण उदाहरण पाठ सामग्रीको ब्लक बहु स्तम्भहरूमा विभाजित गरिने छ, तपाईले एक अखबारको लेखमा के देख्नुहुनेछ। तपाईंको निम्न HTML मार्कअप भन्नुहोस् (ध्यान दिनुहोस् कि उदाहरणको उद्देश्यका लागि, म केवल एक अनुच्छेदको सुरुआत गर्दै छु, जबकि व्यवहारमा त्यहाँ यो मार्कअपमा सामाग्रीको बहु अनुच्छेद हुनेछ):
तपाईंको लेख को शीर्षक
यहाँ पाठ को धेरै अनुच्छेद कल्पना गर्नुहोस ...
यदि तपाइँले यी CSS शैलीहरू लेख्नुभयो भने:
.content {-moz-column-count: 3; - वेबकिट-स्तम्भ-गणना: 3; स्तम्भ गिनती: 3; -मोज-स्तम्भ-अंतर: 30px; -webkit-column-gap: 30px; स्तम्भ-अंतर: 30px; }यो सीएसएस नियमले "सामग्री" विभाजनलाई 3 बराबर स्तम्भहरूमा विभाजित गर्नेछ जुन तिनीहरूको बीचमा 30 पिक्सेलमा खाली हुन्छ। यदि तपाईं 3 को बट्टा दुईवटा स्तम्भ चाहानुहुन्छ भने, तपाइँले मात्र त्यो मान परिवर्तन गर्नुहुनेछ र ब्राउजरले समान स्तम्भहरूको नयाँ चौडाइलाई सामग्री विभाजन गर्न गणना गर्नेछ। ध्यान दिनुहोस् कि हामी पहिले विक्रेन्ड-पूर्वनिर्धारित गुणहरू प्रयोग गर्छौं, पछि गैर-पूर्वनिर्धारित घोषणाहरू।
यो सजिलो रूपमा, यस तरिका यसको प्रयोग वेबसाइट प्रयोगको लागि उत्तरदायी छ। हो, तपाइँ बहुविध स्तम्भहरूमा सामग्रीको गुच्छ विभाजित गर्न सक्नुहुन्छ, तर यो वेबको लागि उत्कृष्ट पढ्ने अनुभव नहुन सक्छ, विशेष गरी यदि ती स्तम्भहरूको उचाई स्क्रिनको "गुना" तल पर्दछ।
सम्पूर्ण सामग्री पढ्नका लागि पाठकहरूलाई माथि र तल स्क्रोल गर्न हुनेछ। अझै पनि, सीएसएस स्तम्भहरूको मुख्य प्रिन्ट सजिलो छ जुन तपाइँ यहाँ देख्नुहुन्छ, र यो केवल केहि अनुच्छेदहरूको सामग्री विभाजित गर्नु भन्दा धेरै गर्न प्रयोग गर्न सकिन्छ - यो, वास्तवमा, लेआउटको लागि प्रयोग गर्न सकिन्छ।
CSS स्तम्भहरूको साथ लेआउट
भन्नुहोस् कि तपाईंको सामग्री सामग्रीसँग एक वेबपेज छ जुन सामग्रीको 3 स्तम्भहरू छन्। यो एक धेरै सामान्य वेबसाइट लेआउट हो, र ती 3 स्तम्भहरू प्राप्त गर्न, तपाई सामान्यतया विभाजनहरू फ्लोट गर्नुहुन्छ। CSS बहु-स्तम्भहरूसँग, यो धेरै सजिलो छ।
यहाँ केहि नमूना HTML छ:
नवीनतम समाचार
सामग्री यहाँ जानुहोस् ...
हाम्रो ब्लगबाट
सामग्री यहाँ जानुहोस् ...
आगामी घटनाक्रम
सामग्री यहाँ जानुहोस् ...
यी धेरै स्तम्भहरू सिर्जना गर्नको लागि CSS ले तपाईंले पहिले देख्नुभएको थियो:
.content {-moz-column-count: 3; - वेबकिट-स्तम्भ-गणना: 3; स्तम्भ गिनती: 3; -मोज-स्तम्भ-अंतर: 30px; -webkit-column-gap: 30px; स्तम्भ-अंतर: 30px; }अब, यस चुनौती यहाँ छ, किनकि ब्राउजरले यस सामग्रीलाई समान रूपमा विभाजित गर्न चाहन्छ, त्यसैले यी विभाजनहरूको सामग्री लम्बाइ भिन्न छ भने, त्यो ब्राउजरले वास्तवमा एक व्यक्तिगत विभाजनको सामग्री विभाजन गर्नेछ, यसलाई एक स्तम्भमा सुरू थप गर्दछ र त्यसपछि अर्कोमा जारी राख्नुहोस् (तपाइँ प्रयोग गर्न चलाउन यो कोड प्रयोग गरेर यो देख्न सक्नुहुन्छ र प्रत्येक विभाजन भित्र सामग्रीको विभिन्न लम्बाइ थप्नुहोस्)!
त्यो तपाईं के चाहनुहुन्न। तपाईं यी प्रत्येक विभाजनलाई एक फरक स्तम्भ सिर्जना गर्न चाहानुहुन्छ र, कुनै पनि फरक विभाजन वा व्यक्तिगत विभाजनको सामग्री कसरी हुन सक्छ, तपाइँ कहिल्यै यो विभाजित गर्न चाहनुहुन्न। तपाईं यो सीएसएस को एक अतिरिक्त लाइन थप गरेर यो प्राप्त गर्न सक्नुहुन्छ:
.न्टेंट डिभ {डिस्प्ले: इनलाइन-ब्लक; }यसले ती विभाजनहरूलाई "सामाग्री" भित्रभित्रै बलियो बनाउनेछ, किनभने ब्राउजरले यसलाई बहुविध स्तम्भमा विभाजन गर्दछ। अझ राम्रो छ, किनकि हामीले यहाँ कुनै निश्चित चौडाई दिनुभएन, किनकि ब्राउजरले आकार परिवर्तन गरी यी स्तम्भ स्वचालित रूपमा रिसाइज गर्नेछन्, तिनीहरूलाई जवाफदेही वेबसाइटहरूको लागि उपयुक्त अनुप्रयोग बनाउन। त्यो "इनलाइन-ब्लक" शैलीको साथ शैलीमा, तपाईंको 3 डिभिजनहरू प्रत्येक सामग्रीको फरक स्तम्भ हुनेछ।
स्तम्भ चौडाइ प्रयोग गर्दै
त्यहाँ "स्तम्भ-गणना" बाहेक अन्य सम्पत्ति हो जुन तपाईले प्रयोग गर्न सक्नुहुनेछ, र तपाईंको सजावट आवश्यकतामा निर्भर गर्दछ, यो वास्तवमा तपाईँको साइटको लागि राम्रो छनौट हुन सक्छ। यो "स्तम्भ चौडाई" हो। पहिले नै देखाइएको जस्तो एचटीएमएल मार्कअप प्रयोग गर्दै, हामी यसको सट्टा हाम्रो CSS सँग गर्न सक्दछौं:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; स्तम्भ चौडाई: 500px; -मोज-स्तम्भ-अंतर: 30px; -webkit-column-gap: 30px; स्तम्भ-अंतर: 30px; } .न्टन्ट डिभ {डिस्प्ले: इनलाइन-ब्लक; }यो कार्यले यो तरिका हो कि ब्राउजरले "स्तम्भ चौडाइ" को प्रयोग गर्दछ कि स्तम्भको अधिकतम मानको रूपमा। त्यसैले यदि ब्राउजर विन्डो 500 पिक्सेल भन्दा कम छ, यो 3 डिभिजनहरू एकल स्तम्भमा देखा पर्नेछ, अर्कोको एक मध्ये एक। यो मोबाइल / सानो स्क्रिन लेआउटहरूको लागि प्रयोग गरिएको एक सामान्य लेआउट हो।
जब ब्राउजर चौडाइले 2 स्तम्भहरू निर्दिष्ट गरिएको स्तम्भ अंतरालहरूसँग फिट गर्न पर्याप्त हुन्छ, ब्राउजर स्वचालित रूपमा एक स्तम्भ लेआउटबाट दुई स्तम्भहरूमा जान्छ। स्क्रिन चौडाई बढाउनुहोस् र अन्तमा, तपाइँले 3 स्तम्भ डिजाइन प्राप्त गर्नुहुनेछ, हाम्रो आफ्नै 3 स्तम्भमा रहेको प्रत्येक 3 विभाजनहरू संग। फेरि, यो केहि उत्तरदायी, मल्टी-उपकरण मैत्रीपूर्ण लेआउटहरू प्राप्त गर्न एक उत्कृष्ट तरिका हो, र लेआउट शैलीहरू परिवर्तन गर्नको लागि तपाइँले मिडिया प्रश्नहरू प्रयोग गर्न पनि आवश्यक छैन!
अन्य स्तम्भ गुणहरू
यहाँ समावेश गरिएका गुणहरूको अतिरिक्त, त्यहाँ "स्तम्भ नियम" को लागि गुणहरू छन्, जसमा रङ, शैली र चौडाइ मानहरू समावेश गर्दछ जुन तपाइँले तपाइँका स्तम्भहरू बीचका नियमहरू सिर्जना गर्न अनुमति दिन्छ। यदि तपाईं केहि स्तम्भहरू तपाईंको स्तम्भहरू अलग गर्न चाहानुहुन्छ भने सिमानाहरूको सट्टा प्रयोग गरिनेछ।
प्रयोग गर्ने समय
हाल, CSS बहुविध स्तम्भ लेआउट धेरै राम्रो छ समर्थित छ। उपसर्गको साथ, वेब प्रयोगकर्ताहरूको 94 भन्दा बढि भन्दा बढि यी शैलीहरू हेर्न सक्षम हुनेछन्, र असमर्थित समूह साँच्चै केवल इन्टरनेट एक्सप्लोररको पुरानो संस्करणहरू हुनेछ जुन तपाई जसरी तपाइँ समर्थन गर्न सक्नुहुन्न।
यस स्तरको समर्थनको साथ अहिलेसम्म, सीएसएस स्तम्भहरूसँग प्रयोग सुरु गर्न र यो तयार उत्पादन उत्पादन वेबसाइटहरूमा तैनात गर्न कुनै कारण छैन। तपाईं यस लेखमा प्रस्तुत एचटीएमएल र सीएसएस प्रयोग गरी आफ्नो प्रयोग सुरु गर्न र आफ्नो साइट को लेआउट को आवश्यकताहरु को लागि सबै भन्दा राम्रो काम गर्नेछ कि हेर्न को लागि विभिन्न मूल्यहरु संग खेल खेल्न सक्नुहुन्छ।