आम तौर पर, जब हम DIVsएक पंक्ति में एक से अधिक होना चाहते हैं तो हम उपयोग करेंगे float: left, लेकिन अब मुझे इसकी चाल का पता चलाdisplay:inline-block
उदाहरण लिंक यहाँ । यह मुझे लगता है कि एक पंक्ति में एक display:inline-blockबेहतर तरीका है align DIVs, लेकिन क्या कोई कमियां हैं? यह दृष्टिकोण कम लोकप्रिय क्यों है फिर floatचाल?
जवाबों:
3 शब्दों में: inline-blockबेहतर है।
इनलाइन ब्लॉक
display: inline-blockदृष्टिकोण के लिए एकमात्र दोष यह है कि IE7 में और एक तत्व के नीचे केवल तभी प्रदर्शित किया जा सकता है inline-blockजब यह पहले inlineसे ही डिफ़ॉल्ट रूप से हो। इसका मतलब यह है कि एक <div>तत्व का उपयोग करने के बजाय आपको एक तत्व का उपयोग करना होगा <span>। यह वास्तव में एक बहुत बड़ी कमी नहीं है क्योंकि शब्दार्थ <div>पृष्ठ को विभाजित करने के लिए है, जबकि एक पृष्ठ के <span>एक अंतराल को कवर करने के लिए है, इसलिए बहुत बड़ा शब्दार्थ अंतर नहीं है। की एक बड़ी लाभ display:inline-blockयह है कि जब अन्य डेवलपर्स बाद में किसी समय अपने कोड को बनाए रखने रहे हैं, यह बहुत अधिक स्पष्ट क्या है display:inline-blockऔर text-align:right एक से पूरा करने के लिए कोशिश कर रहा है float:leftया float:rightबयान। inline-blockदृष्टिकोण का मेरा पसंदीदा लाभ यह है कि इसका उपयोग करना आसान है vertical-align: middle, line-heightऔरtext-align: centerतत्वों को पूरी तरह से केंद्र में, एक तरह से जो सहज है। मुझे मोज़िला ब्लॉग पर क्रॉस-ब्राउज़र इनलाइन-ब्लॉक को लागू करने के तरीके पर एक शानदार ब्लॉग पोस्ट मिला । यहाँ ब्राउज़र संगतता है ।
फ्लोट
कारण यह है कि floatविधि का उपयोग करना आपके पृष्ठ के लेआउट के लिए अनुकूल नहीं है, क्योंकि floatCSS संपत्ति मूल रूप से केवल एक छवि (पत्रिका शैली) के आसपास पाठ लपेटने के लिए थी और डिजाइन द्वारा, सामान्य पृष्ठ लेआउट उद्देश्यों के लिए सबसे उपयुक्त नहीं है। बाद में फ्लोट किए गए तत्वों को बदलते समय, कभी-कभी आपके पास पोज़िशनिंग समस्याएँ होंगी क्योंकि वे पृष्ठ प्रवाह में नहीं हैं । एक और नुकसान यह है कि इसे आम तौर पर एक उपसर्ग की आवश्यकता होती है अन्यथा यह पृष्ठ के पहलुओं को तोड़ सकता है। स्पष्ट उपसर्ग के लिए आवश्यक तत्व के बाद एक तत्व जोड़ने के लिए उनके माता-पिता को उनके आसपास गिरने से रोकने के लिए है जो सामग्री से शैली को अलग करने के बीच अर्थ रेखा को पार करता है और इस प्रकार वेब विकास में एक विरोधी पैटर्न है ।
ऊपर दी गई लिंक में बताई गई किसी भी श्वेत स्थान की समस्या को आसानी से white-spaceCSS संपत्ति के साथ तय किया जा सकता है।
साइट डिज़ाइन वेब डिज़ाइन सलाह के लिए एक बहुत विश्वसनीय स्रोत है और उन्हें लगता है कि मेरे पास एक ही राय है:
यदि आप CSS लेआउट के लिए नए हैं, तो आपको यह सोचने के लिए क्षमा कर दिया जाएगा कि कल्पनाशील तरीकों से CSS फ्लोट का उपयोग करना कौशल की ऊंचाई है। यदि आपने कई सीएसएस लेआउट ट्यूटोरियल के रूप में उपभोग किया है, तो आप पा सकते हैं, आप मान सकते हैं कि मास्टरिंग फ़्लोट्स बीतने का एक संस्कार है। आप सरलता से चकित हो जाएंगे, जटिलता से चकित हो जाएंगे, और जब आप अंततः समझ जाएंगे कि कैसे काम करता है तो आप उपलब्धि हासिल करेंगे।
मूर्ख मत बनो। आपका ब्रेनवॉश किया जा रहा है।
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 IE9 के लिए समर्थन को हटा रहा है, और इस प्रकार पंक्तियों से फ़्लोट्स से छुटकारा पा रहा है और फुल फ्लेक्सबॉक्स जा रहा है।
white-spaceसंपत्ति का उल्लेख करते हैं - क्या आप इसे समझा सकते हैं?
letter-spacingअपने सीएसएस में कहीं और अनुकूलित करने के लिए नहीं टूटूंगा।
जब मैं मानता हूं कि सामान्य रूप inline-blockसे बेहतर है, तो एक अतिरिक्त बात यह है कि यदि आप प्रतिशत ग्रिड का उपयोग कर रहे हैं तो एक उत्तरदायी ग्रिड बनाने के लिए (या यदि आप पिक्सेल-परिपूर्ण चौड़ाई चाहते हैं):
यदि आप inline-blockउस ग्रिड का उपयोग कर रहे हैं जो कुल 100% या 100% चौड़ाई के पास है, तो आपको यह सुनिश्चित करने की आवश्यकता है कि आपके HTML मार्कअप में कॉलम के बीच कोई सफेद स्थान नहीं है ।
फ़्लोट्स के साथ, यह कुछ ऐसा नहीं है जिसके बारे में आपको चिंता करने की ज़रूरत है - कॉलम किसी भी व्हाट्सएप या कॉलम के बीच अन्य सामग्री पर तैरते हैं। इस प्रश्न के उत्तर में आपके व्हाट्सएप कोड को बदसूरत किए बिना HTML व्हाट्सएप को हटाने के कुछ अच्छे सुझाव दिए गए हैं ।
यदि किसी भी कारण से आप HTML मार्कअप (जैसे एक प्रतिबंधक सीएमएस) को नियंत्रित नहीं कर सकते हैं, तो आप यहां बताए गए ट्रिक्स को आजमा सकते हैं, या आपको इनलाइन-ब्लॉक के बजाय फ्लोट से समझौता करने और उपयोग करने की आवश्यकता हो सकती है। वहाँ भी बदसूरत सीएसएस चाल है कि केवल चरम परिस्थितियों में इस्तेमाल किया जाना चाहिए, जैसे font-size:0;स्तंभ कंटेनर पर फिर प्रत्येक स्तंभ के भीतर फ़ॉन्ट आकार फिर से ।
उदाहरण के लिए:
float: left । यह "बस काम करता है" (लेकिन आवरण को साफ करने की आवश्यकता के लिए)।inline-block । ब्लॉक के बीच व्हाट्सएप एक निश्चित-चौड़ाई वाली जगह बनाता है जो 100% से अधिक की कुल चौड़ाई को धकेलता है, लेआउट को तोड़ता है और आखिरी कॉलम को एक रेखा से नीचे गिरा देता है।inline-blockHTML में कॉलम के बीच एक ही ग्रिड है, जिसमें कोई व्हाट्सएप नहीं है । यह "बस फिर से काम करता है" - लेकिन HTML बदसूरत है और आपका सीएमएस अपने HTML आउटपुट में किसी प्रकार के पूर्वनिर्धारण या इंडेंटिंग के लिए मजबूर कर सकता है जिससे वास्तविकता को प्राप्त करना मुश्किल हो जाता है।div+(whitespace) {display:none}या कुछ और?
<div class="inlinething">hi</div> <div class="inlinething">there</div> more content here... ?)
यदि आप divपिक्सेल के साथ सटीक संरेखित करना चाहते हैं , तो फ्लोट का उपयोग करें। inline-blockहमेशा लगता है कि आपको कुछ पिक्सेल काट लेना चाहिए (कम से कम IE में)
* {padding:0px; margin:0px; }क्योंकि इससे मेरी कोडिंग को संतुलित करने में मदद मिलती है
इनलाइन-ब्लॉक के बारे में एक विशेषता है जो हालांकि सीधे-आगे नहीं हो सकती है। वह यह है कि CSS में वर्टिकल-अलाइन के लिए डिफ़ॉल्ट वैल्यू बेसलाइन है। यह कुछ अप्रत्याशित संरेखण व्यवहार का कारण हो सकता है। इस लेख को देखें।
http://www.brunildo.org/test/inline-block.html
इसके बजाय, जब आप फ्लोट करते हैं: बाएं, div एक दूसरे से स्वतंत्र होते हैं और आप आसानी से मार्जिन का उपयोग करके उन्हें संरेखित कर सकते हैं।
inline, जिसके बारे में नहींinline-block। लेकिन संबंधित में पहला अच्छा है: stackoverflow.com/a/11823622/918414