दिलचस्प पोस्ट
ट्रैकिंग पिक्सेल का विकास करना PHP उत्पादन सर्वर – त्रुटि संदेश चालू करें कस्टम विशेषताओं – हाँ या ना? डेल्फी में पैच की नियमित कॉल कैसे एक प्रक्रिया अंडे और .NET में अपने एसटीडीओटी पर कब्जा? टाइमआउट पैटर्न – कितना बुरा धागा है। ओ एक छवि प्रदर्शित जावा 8 फ़ंक्शनल स्टाइल में, मैं पहले से मौजूद कुंजी मान जोड़ी के मानों को कैसे मैप कर सकता हूं जावा के साथ सेलेनियम वेबड्रायवर का प्रयोग करके टैब स्विच करें Getopts के साथ वैकल्पिक विकल्प तर्क "सूचक-घटनाएं: कोई नहीं" IE9 और IE10 में काम नहीं करता Math.max.apply () कैसे काम करता है? जावा बहुलाइन स्ट्रिंग आप मेमोरीस्ट्रीम से स्ट्रिंग कैसे प्राप्त करते हैं? क्या एक सरल, सुरुचिपूर्ण तरीका है जो सिंगलोन को परिभाषित करता है?

डिस्प्ले का उपयोग करने के लाभ: इनलाइन-ब्लॉक बनाम फ्लोट: सीएसएस में छोड़ दिया

आम तौर पर, जब हम एक पंक्ति में एकाधिक DIVs चाहते हैं तो हम float: left प्रयोग करेंगे float: left , लेकिन अब मुझे display:inline-block की चाल की खोज की गई है display:inline-block

उदाहरण लिंक यहां । मुझे लगता है कि display:inline-block एक पंक्ति में DIVs को align करने का एक बेहतर तरीका है, लेकिन क्या कोई कमियां हैं? यह दृष्टिकोण कम लोकप्रिय क्यों है तो float चाल है?

वेब के समाधान से एकत्रित समाधान "डिस्प्ले का उपयोग करने के लाभ: इनलाइन-ब्लॉक बनाम फ्लोट: सीएसएस में छोड़ दिया"

3 शब्दों में: inline-block बेहतर है

इनलाइन ब्लॉक

display: inline-block एकमात्र दोष display: inline-block दृष्टिकोण यह है कि आईई 7 में और नीचे एक तत्व केवल inline-block प्रदर्शित किया जा सकता है अगर यह पहले से ही डिफ़ॉल्ट रूप से inline । इसका अर्थ यह है कि <div> तत्व का उपयोग करने के बजाय आपको <span> तत्व का उपयोग करना पड़ता है यह सचमुच एक बड़ा दोष नहीं है क्योंकि एक पृष्ठ <span> एक पृष्ठ के अंतराल को कवर करने के लिए है, इसलिए एक पृष्ठ <div> विभाजित करने के लिए है, इसलिए कोई बड़ा अर्थ अंतर नहीं है display:inline-block का एक बड़ा लाभ display:inline-block यह है कि जब दूसरे डेवलपर्स आपके कोड को बाद के बिंदु पर रखे हुए हैं, तो यह अधिक स्पष्ट है कि क्या display:inline-block और text-align:right एक float:left तुलना में पूरा करने की कोशिश कर रहा है float:left या float:right वक्तव्य inline-block दृष्टिकोण का मेरा पसंदीदा लाभ यह है कि vertical-align: middle , line-height और text-align: center vertical-align: middle का उपयोग करना आसान है vertical-align: middle तत्वों को पूरी तरह से केन्द्रित करने के लिए केंद्र, एक तरह से जो सहज ज्ञान युक्त है मुझे मोज़िला ब्लॉग पर क्रॉस-ब्राउज़र इनलाइन-ब्लॉक लागू करने के बारे में एक महान ब्लॉग पोस्ट मिला। यहां ब्राउज़र संगतता है

फ्लोट

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

ऊपर दिए गए लिंक में वर्णित किसी भी सफेद स्थान की समस्या आसानी से white-space सीएसएस संपत्ति के साथ तय की जा सकती है।

संपादित करें:

वेबपॉइंट सलाह के लिए साइटपॉइंट एक बहुत ही विश्वसनीय स्रोत है और मुझे लगता है कि मैं ऐसा ही विचार करता हूं:

यदि आप सीएसएस लेआउट में नए हैं, तो आपको यह सोचने के लिए माफ़ किया जाएगा कि कल्पनाशील तरीके से सीएसएस फ्लोट्स का प्रयोग कौशल की ऊंचाई है। यदि आप जितने सीएसएस लेआउट ट्यूटोरियल्स का उपयोग कर सकते हैं, आप मान सकते हैं कि मास्टरींग फ़्लोट्स बीतने का एक अनुष्ठान है। आप सरलता से चकाचौंध हो जायेंगे, जटिलता से चकित होंगे, और जब आप अंततः समझेंगे कि कैसे तैरता है काम करता है तो आपको उपलब्धि की भावना मिलेगी।

मूर्ख मत बनो आपको ब्रेनवॉश किया जा रहा है

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

2015 अपडेट – फ्लेक्सबॉक्स आधुनिक ब्राउज़रों के लिए एक अच्छा विकल्प है :

 .container { display: flex; /* or inline-flex */ } .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 

और जानकारी

21 दिसंबर 2016 अद्यतन

बूटस्ट्रैप 4 आईई 9 के लिए समर्थन को निकाल रहा है, और इस तरह पंक्तियों से फ्लोटों को छुटकारा दिला रहा है और पूर्ण फ्लेक्सबॉक्स जा रहा है।

पुल अनुरोध # 2138 9

हालांकि मैं सहमत हूं कि सामान्य inline-block में बेहतर है, यदि आप एक उत्तरदायी ग्रिड (या यदि आप पिक्सेल-पूर्ण चौड़ाई चाहते हैं) बनाने के लिए प्रतिशत चौड़ाई का उपयोग कर रहे हैं , तो एक अतिरिक्त बात है:

यदि आप उन ग्रिड के लिए inline-block का उपयोग कर रहे हैं जो कुल 100% या 100% चौड़ाई के निकट हैं, तो आपको यह सुनिश्चित करने की आवश्यकता है कि आपके HTML मार्कअप में कॉलम के बीच कोई भी सफेद स्थान नहीं है

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

अगर किसी कारण से आप HTML मार्कअप (जैसे एक प्रतिबंधक सीएमएस) को नियंत्रित नहीं कर सकते हैं, तो आप यहाँ वर्णित चालों की कोशिश कर सकते हैं, या इनलाइन-ब्लॉक के बजाय आपको तमाम समझौता करने और उपयोग करने की आवश्यकता हो सकती है। यहां भी बदसूरत सीएसएस ट्रिक्स हैं जिनका उपयोग केवल चरम स्थितियों में किया जाना चाहिए, जैसे font-size:0; स्तंभ कंटेनर पर प्रत्येक कॉलम के भीतर फ़ॉन्ट आकार फिर से दोहराएं ।

उदाहरण के लिए:

  • यहां float: left साथ 33.3% चौड़ाई के 3-कॉलम ग्रिड है float: left यह "सिर्फ काम करता है" (लेकिन साफ ​​करने की आवश्यकता वाले आवरण के लिए)
  • inline-block साथ यहां सटीक समान ग्रिड है ब्लॉकों के बीच का रिक्त स्थान एक निश्चित-चौड़ाई वाली जगह बनाता है जो 100% से अधिक की कुल चौड़ाई को धक्का देता है, लेआउट को तोड़ता है और पिछले कॉलम को एक पंक्ति ड्रॉप करने के कारण होता है
  • यहां एक ही ग्रिड है, जिसमें inline-block और एचटीएमएल में स्तंभों के बीच कोई सफेद स्थान नहीं है I यह फिर से "काम करता है" – लेकिन एचटीएमएल बेवकूफ है और आपकी सीएमएस किसी भी प्रकार की प्रेज़ेंटेशन या इसके एचटीएमएल आउटपुट के लिए इंडेंट कर सकती है, जिससे वास्तविकता में इसे हासिल करना मुश्किल हो सकता है।

यदि आप पिक्सेल के साथ डिवेल को सटीक बनाना चाहते हैं, तो फ्लोट का उपयोग करें। inline-block हमेशा आपको कुछ पिक्सल काट करने की आवश्यकता है (कम से कम IE में)

आप यहां गहराई में जवाब पा सकते हैं।

लेकिन आम तौर पर float साथ आपको आसपास के तत्वों के बारे में जागरूक होने और देखभाल करने की जरूरत होती है और लाइन तत्वों के लिए inline-block आसान तरीका है।

धन्यवाद

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

http://www.brunildo.org/test/inline-block.html

इसके बजाय, जब आप एक फ्लोट करते हैं: बाएं, डिव्स एक दूसरे से स्वतंत्र होते हैं और आप आसानी से मार्जिन का इस्तेमाल कर उन्हें संरेखित कर सकते हैं।