फ्लोट के प्रतिस्थापन के रूप में इनलाइन-ब्लॉक

छह महीने पहले मैंने संपत्ति पर फ्लोट के बारे में हबर पढ़ें पर लेख अनुवाद किया था। इस बार इसे थोड़ा अलग कोण से देखते हैं। किसी साइट को विकसित करते समय, हम अक्सर एक पेज पर कुछ ब्लॉक, जैसे साइडबार, की स्थिति के लिए फ्लोट का उपयोग करते हैं। लेकिन क्या यह वास्तव में आवश्यक है?

फ्लोट हमेशा सुविधाजनक नहीं होता है: उदाहरण के लिए, जब एक छवि के साथ ग्रिड टाइप करना। कभी-कभी इनलाइन-ब्लॉक का उपयोग करना उचित होता है, जो फ्लोट के व्यवहार की नकल करता है।

इनलाइन-ब्लॉक क्या है?

सामान्य ब्लॉक तत्व संरचना:



इनलाइन-ब्लॉक एक मूल्य है जिसे प्रदर्शन संपत्ति को सौंपा जा सकता है। नाम इनलाइन और ब्लॉक तत्वों दोनों की कुछ विशेषताओं से आता है।

• ब्लॉक तत्व ऊंचाई, चौड़ाई, पैडिंग, मार्जिन, बॉर्डर हैं, और एक दूसरे के नीचे लंबवत भी स्थित हैं।
• इनलाइन तत्वों को क्षैतिज रूप से व्यवस्थित किया जाता है, एक के बाद एक।
• इनलाइन-ब्लॉक तत्वों में ब्लॉक और इनलाइन दोनों तत्वों की विशेषताएं हैं।

इनलाइन ब्लॉक बनाम फ्लोट: अंतर

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

डेमो देखें

अंतराल से निपटने के लिए कई तकनीकों का उपयोग किया जा सकता है। सूचियों में रिक्त स्थान हटाना:

<ul> <li> one</li><li> two</li><li> three</li> </ul> 

ऋणात्मक मार्जिन मान का उपयोग करना:

 nav a { display: inline-block; margin-right: -4px; } 

कोई बंद LI टैग के साथ एक अजीब तरीका:

 <ul> <li>one <li>two <li>three </ul> 

फ़ॉन्ट-आकार मान को शून्य पर सेट करना:

 nav { font-size: 0; } nav a { font-size: 16px; } 

आप सीएसएस-ट्रिक्स लेख में इन तरीकों के बारे में अधिक पढ़ सकते हैं।

क्या उपयोग करें?

इनलाइन-ब्लॉक और फ्लोट के बीच का चुनाव किसी विशेष डिज़ाइन में हल किए जाने वाले कार्यों के आधार पर किया जाना चाहिए। अंत में, यह सभी इन दो उपकरणों के बीच के अंतरों के लिए नीचे आता है:

• यदि आपको तत्वों के ऊर्ध्वाधर संरेखण और क्षैतिज स्थिति पर अधिक नियंत्रण की आवश्यकता है, तो इनलाइन-ब्लॉक का उपयोग करें।
• यदि आपको आस-पास के तत्वों को लपेटने की आवश्यकता है, साथ ही पुराने ब्राउज़रों के लिए समर्थन करने के लिए फ्लोट का उपयोग करें, और ब्लॉक के बीच रिक्त स्थान की समस्या से परेशान नहीं होना चाहते हैं।

छवि ग्रिड

इस तरह के ग्रिड का उपयोग फोटो गैलरी में किया जाता है। यह उदाहरण इनलाइन-ब्लॉक के व्यवहार को दिखाता है और अच्छी तरह से तैरता है। यदि चित्र समान ऊंचाई के हैं, तो फ्लोट का उपयोग करना उचित है। यदि ऊंचाई अलग है, तो तत्वों को कुटिल रूप से प्रदर्शित किया जा सकता है:



इनलाइन-ब्लॉकों में ऐसी समस्या नहीं है, क्योंकि वे लाइन में एक ही स्तर पर स्थित हैं। इसलिए, इनलाइन-ब्लॉक गैलरी के लेआउट के लिए बेहतर अनुकूल है:



प्रदर्शन देखें

निष्कर्ष

हम पेज लेआउट में कई समस्याओं को हल करने के लिए फ्लोट का उपयोग करने के लिए उपयोग किया जाता है। हालांकि, इनलाइन-ब्लॉक का उपयोग करना कभी-कभी आसान और अधिक सुविधाजनक होता है। और कभी-कभी अच्छी पुरानी तालिकाओं का उपयोग करना अधिक सही होता है।

विषय पर प्रयुक्त सामग्री और उपयोगी लिंक:

• टर्न स्टाइल: फ्लोट बनाम। इनलाइन ब्लॉक
• Vanseo Design: क्या आपको फ्लोट के लिए इनलाइन-ब्लॉक का उपयोग करना चाहिए?
• CSS-Tricks.com: इनलाइन ब्लॉक एलिमेंट्स के बीच स्पेस लड़ना