बाईंओर तैरना; बनाम प्रदर्शन: इनलाइन; बनाम प्रदर्शन: इनलाइन-ब्लॉक; बनाम प्रदर्शन: टेबल-सेल;

Question

मेरे सवाल)

1. क्या इन तरीकों में से कोई एक पेशेवर वेब डिजाइनर द्वारा पसंद किया जाता है?

2. क्या वेबसाइट को ड्रा करते समय वेब ब्राउजर द्वारा इनमें से कोई भी तरीका पूर्व निर्धारित है?

3. क्या यह सब सिर्फ व्यक्तिगत पसंद है?

4. क्या अन्य तकनीकें मुझे याद आ रही हैं?

नोट: उपरोक्त प्रश्न बहु-स्तंभ लेआउट को डिजाइन करने के संबंध में हैं

---

बाईंओर तैरना;

http://jsfiddle.net/CDe6a/

यह वह तरीका है जिसका उपयोग मैं हमेशा कॉलम लेआउट बनाते समय करता हूं, और यह ठीक काम करने लगता है। हालांकि, माता-पिता खुद पर टूट पड़ते हैं, इसलिए आपको clear:both;बाद में याद रखना चाहिए । एक और चोर जो मुझे अभी मिला, वह था टेक्स्ट को लंबवत रूप से संरेखित करने में असमर्थता।

display: inline;

यह ढहते माता-पिता की समस्या को ठीक करता है, लेकिन व्हॉट्सएप जोड़ता है।

http://jsfiddle.net/CDe6a/1/

Html से व्हॉट्सएप हटाना इस समस्या को सबसे आसान लगता है, लेकिन अगर आप वास्तव में अपने HTML के बारे में चुस्त हैं तो यह वांछित नहीं है।

http://jsfiddle.net/CDe6a/2/

प्रदर्शित: इनलाइन-ब्लॉक;

बिल्कुल वैसा ही व्यवहार करने लगता है display:inline;।

http://jsfiddle.net/CDe6a/3/

प्रदर्शित: तालिका सेल;

http://jsfiddle.net/CDe6a/4/

एकदम सही काम करता है।

मेरे विचार:

मुझे यकीन है कि मुझे एक टन सामान याद आ रहा है, कुछ अपवादों की तरह जो लेआउट को तोड़ देगा लेकिन, display:table-cell;सबसे अच्छा काम करने लगता है, और मुझे लगता है कि मैं बदलना शुरू कर दूंगा float:left;क्योंकि मुझे हमेशा गड़बड़ लगता है clear:both;। मैंने वेब पर इसके बारे में कई लेख और ब्लॉग पढ़े हैं, लेकिन उनमें से कोई भी मुझे इस बात का निश्चित जवाब नहीं देता है कि मुझे अपनी वेबसाइट बनाते समय क्या उपयोग करना चाहिए।

Comments

देखें कि html5boilerplate और Twitter बूटस्ट्रैप पर लोग क्या उपयोग करते हैं और इसके साथ रहना चाहते हैं

— रॉबर्ट Niestroj

: वहाँ सीएसएस-चाल पर अंतरिक्ष लड़ने के बारे में एक महान लेख है css-tricks.com/fighting-the-space-between-inline-block-elements

— Lea Rosema

मैंने display: inlineसंपत्ति का उपयोग करने की कोशिश की और मैंने पाया कि यह सही तरीके से बाल तत्वों पर पैडिंग का ध्यान नहीं रखता है। लेकिन अगर मैं इसका उपयोग करता हूं तो display: inline-blockस्वचालित रूप से ध्यान रखा जाता है। कृपया लिंक देखें - codepen.io/prashdeep/pen/rVOyvd कृपया मुझे उसी पर अपने इनपुट्स बताएं

— zilcuanu

Answer 1

आपके द्वारा पूछे गए विकल्पों में से:

• float:left;
  मैं नाव को खाली करने के लिए अतिरिक्त मार्कअप की आवश्यकता के कारण तैरता नापसंद करता हूं। जहां तक ​​मेरा सवाल है, floatसीएसएस स्पेक्स में पूरी अवधारणा को खराब तरीके से डिजाइन किया गया था। हालांकि हम इसके बारे में अभी कुछ नहीं कर सकते हैं। लेकिन महत्वपूर्ण बात यह है कि यह काम करता है, और यह सभी ब्राउज़रों में काम करता है (यहां तक ​​कि IE6 / 7), इसलिए यदि आप इसे पसंद करते हैं तो इसका उपयोग करें।

यदि आप :afterफ़्लोटर्स को साफ़ करने के लिए चयनकर्ता का उपयोग करते हैं, तो क्लियरिंग के लिए अतिरिक्त मार्कअप आवश्यक नहीं हो सकता है , लेकिन यदि आप IE6 या IE7 का समर्थन करना चाहते हैं तो यह विकल्प नहीं है।

• display:inline;
  यह IE6 / 7 के अपवाद के साथ लेआउट के लिए उपयोग नहीं किया जाना चाहिए, जहां display:inline; zoom:1के लिए टूटे समर्थन के लिए एक फॉल-बैक हैक है inline-block।

• display:inline-block;
  यह मेरा पसंदीदा विकल्प है। यह IE6 / 7 के लिए एक चेतावनी के साथ सभी ब्राउज़रों में अच्छी तरह से और लगातार काम करता है, जो कुछ तत्वों के लिए इसका समर्थन करते हैं। लेकिन इसके आसपास काम करने के लिए हैकी समाधान के लिए ऊपर देखें।

के साथ अन्य बड़ा चेतावनी inline-blockयह है कि इनलाइन पहलू के कारण, तत्वों के बीच सफेद रिक्त स्थान को पाठ के शब्दों के बीच सफेद रिक्त स्थान के समान माना जाता है, इसलिए आप तत्वों के बीच दिखाई देने वाले अंतराल प्राप्त कर सकते हैं। इसके लिए काम के आस-पास हैं, लेकिन उनमें से कोई भी आदर्श नहीं है। (सबसे अच्छा तत्वों के बीच कोई स्थान नहीं है)

• display:table-cell;
  एक और जहां आपको ब्राउज़र संगतता की समस्याएं होंगी। पुराने IEs इसके साथ बिल्कुल काम नहीं करेंगे। लेकिन अन्य ब्राउज़रों के लिए भी, यह ध्यान देने योग्य है कि table-cellइसका उपयोग उन तत्वों के अंदर होने के संदर्भ में किया जाता है जिन्हें स्टाइल किया जाता है tableऔर table-row; table-cellआइसोलेशन में उपयोग करना ऐसा करने का अभीष्ट तरीका नहीं है, इसलिए आप अलग-अलग ब्राउज़र का अनुभव कर सकते हैं।

अन्य तकनीकें जो आपको याद हो सकती हैं? हाँ।

• जब से आप कहते हैं कि यह एक बहु-स्तंभ लेआउट के लिए है, एक सीएसएस कॉलम सुविधा है जिसके बारे में आप जानना चाहते हैं। हालांकि यह सबसे अच्छी तरह से समर्थित सुविधा नहीं है (IE9 में भी IE द्वारा समर्थित नहीं है, और अन्य सभी ब्राउज़रों द्वारा आवश्यक एक विक्रेता उपसर्ग), इसलिए आप इसका उपयोग नहीं करना चाह सकते हैं। लेकिन यह एक और विकल्प है, और आपने पूछा।

• सीएसएस फ्लेक्सबॉक्स सुविधा भी है, जिसका उद्देश्य आपको बॉक्स से बॉक्स तक पाठ प्रवाह की अनुमति देना है। यह एक रोमांचक विशेषता है जो कुछ जटिल लेआउट की अनुमति देगा, लेकिन यह अभी भी विकास में बहुत अधिक है - http://html5please.com/#flexbox देखें

उम्मीद है की वो मदद करदे।

Comments

आपको तैरने के लिए अतिरिक्त मार्कअप की आवश्यकता नहीं है, उस पर मेरा उत्तर देखें।

— रेयान

सबसे मजबूत प्रतिक्रिया = उत्तर।

— ईजीएचडीके

मैं हमेशा उपयोग करता हूं inline-blockक्योंकि यह इन मामलों के लिए बिल्कुल बनाया गया है।

— रापली अंद्रेस

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

— व्हाट्सएप

@ AlexMorley- फिंच: वास्तव में, यह एक अच्छा उपाय है। हालांकि, ध्यान रखें कि यदि आप फ़ॉन्ट आकार का उपयोग कर रहे हैं तो यह काम नहीं करता है em। इसका मतलब है कि यह सभी मामलों के लिए उपयुक्त समाधान नहीं हो सकता है। आप इस उत्तर को अलग से पोस्ट करना भी देख सकते हैं , जो इस बिंदु को कवर करता है, और सफेद स्थान के मुद्दे से निपटने के लिए अन्य विकल्प।

— स्पडली

Answer 2

मैं आमतौर पर ढहने वाली मूल समस्या को हल करने के लिए उपयोग करता हूं float: left;और जोड़ता हूं (जैसा कि यह काम करता है, अगर आप इसे स्पष्ट ऊंचाई नहीं देते हैं, तो स्क्रॉलबार जोड़ने के बजाय माता-पिता का विस्तार करेंगे)। मेनू बार में पाठ की एक-पंक्ति के लिए मेरे पास सबसे अधिक ऊर्ध्वाधर संरेखण की आवश्यकता है , जिसे संपत्ति का उपयोग करके हल किया जा सकता है । अगर मुझे वास्तव में एक ब्लॉक एलिमेंट को वर्टीकल एलाइन करना है, तो मैं पेरेंट पर एक स्पष्ट हाइट और वर्टीकल एलाइन्ड आइटम, पोज़िशन एब्सोल्यूट, टॉप 50% और नेगेटिव मार्जिन सेट करूँगा।overflow: auto;overflow: autooverflow: hiddenline-height

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

फ्लोट: लेफ्ट और ओवरफ्लो: ऑटो के बारे में सबसे अच्छी बात यह है कि यह बिना हैक के IE6 में वापस काम करता है।

Comments

यह उत्कृष्ट बिंदु, MANY लोकप्रिय ट्यूटोरियल में उल्लेख नहीं किया गया है। प्रश्नों के युगल: क्या यह वास्तव में विभिन्न ब्राउज़रों में परीक्षण किया गया है? नौसेना और सामग्री जैसे दो ब्लॉकों के बीच विभाजक बनाने के लिए आपकी पसंद का तरीका क्या है? मेरे पूछने का कारण यह है क्योंकि यदि उपरोक्त divs अलग ऊंचाई के हैं तो यह मुश्किल होगा।

— शीतल शाह

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

— लेयन रयान

इससे समाशोधन के बारे में बहुत कुछ पता चला और मुझे नहीं पता था कि अतिप्रवाह ऐसा कर सकता है। Im का उपयोग किया: विधि के बाद जहां यू एक सामग्री जोड़ें: "।" और दृश्यता: छिपा हुआ। इसके लिए धन्यवाद

— Nils_e

Answer 3

मैं कहूंगा कि यह इस पर निर्भर करता है कि आपको इसके लिए क्या चाहिए:

1. यदि आपको केवल 3 कॉलम लेआउट प्राप्त करने की आवश्यकता है, तो मैं इसके साथ करने का सुझाव दूंगा float।

2. यदि आपको मेनू के लिए इसकी आवश्यकता है, तो आप उपयोग कर सकते हैं inline-block। व्हाट्सएप समस्या के लिए, आप क्रिस कॉयर द्वारा वर्णित कुछ ट्रिक्स का उपयोग कर सकते हैं यहां http://css-tricks.com/fighting-the-space-between-inline-block-elements/ ।

3. यदि आपको एक बहु विकल्प विकल्प बनाने की आवश्यकता है, जिसकी चौड़ाई एक निर्दिष्ट बॉक्स के अंदर समान रूप से फैलाने की आवश्यकता है, तो मैं पसंद करूंगा display: table। यह कुछ ब्राउज़रों में सही ढंग से काम नहीं करेगा, इसलिए यह आपके ब्राउज़र समर्थन पर निर्भर करता है।

अंत में, सबसे अच्छा तरीका क्या हो सकता है flexbox। इसके लिए कल्पना कुछ समय बदल गई है, इसलिए यह अभी तक स्थिर नहीं है। लेकिन एक बार इसे अंतिम रूप देने के बाद, यह सबसे अच्छा तरीका होगा जो मैं समझता हूं।

Comments

क्रिस कॉयर के लेख के लिंक के लिए +1। उनकी सूची के अलावा एक तरीका यह है कि YUI का शुद्ध CSS ग्रिड उपयोग करता है: github.com/yui/pure/blob/master/src/grids/css/grids-core.css

— Web_Design.com

Answer 4

मैं इनलाइन-ब्लॉक पसंद करता हूं, हालांकि फ्लोट भी उपयोगी है। टेबल-सेल को पुराने IE द्वारा सही तरीके से प्रस्तुत नहीं किया गया है (न तो इनलाइन-ब्लॉक है, लेकिन वहां हैzoom: 1; *display: inline हैक है जो मैं अक्सर उपयोग करता हूं)। यदि आपके पास ऐसे बच्चे हैं जिनके पास उनके माता-पिता की तुलना में थोड़ी ऊँचाई है, तो फ़्लोट उन्हें शीर्ष पर लाएगा, जबकि इनलाइन-ब्लॉक कभी-कभी खराब हो जाएंगे।

अधिकांश समय, ब्राउज़र सब कुछ सही ढंग से व्याख्या करेगा, जब तक कि निश्चित रूप से, यह IE है। आपको हमेशा यह सुनिश्चित करने के लिए जांचना होगा कि IE चूसना नहीं है - उदाहरण के लिए, टेबल-सेल अवधारणा।

सभी वास्तविकता में, हाँ, यह व्यक्तिगत प्राथमिकता पर निर्भर करता है।

एक तकनीक जिसे आप सफेद स्थान से छुटकारा पाने के लिए उपयोग कर सकते हैं font-sizeवह माता-पिता के लिए 0 का सेट होगा , फिर font-sizeबच्चों को वापस दे , हालांकि यह एक परेशानी और सकल है।

Comments

यदि "आपको हमेशा यह देखना होगा कि IE बेकार नहीं है" तो आप हमेशा निराश होंगे। Hehe। (दूसरी ओर, वह कहता है कि आपको हमेशा यह जांचना चाहिए कि आपका कोड IE के प्रत्येक संस्करण में चूसना नहीं चाहता है)

— Spudley

Answer 5

केवल रिकॉर्ड के लिए, स्पुडली के उत्तर को जोड़ने के लिए, position: absoluteयदि आप स्तंभ की चौड़ाई जानते हैं तो उपयोग और मार्जिन की भी संभावना है ।

मेरे लिए, मुख्य मुद्दा जब किसी विधि को चुना जाता है, तो यह है कि क्या आपको पूरी ऊंचाई (समान ऊंचाई) भरने के लिए कॉलम की आवश्यकता है, जहां टेबल-सेल सबसे आसान तरीका है (यदि आप पुराने ब्राउज़रों की ज्यादा परवाह नहीं करते हैं)।

Answer 6

मैं पसंद करता हूं inline-block, लेकिन floatHTML एलिमेंट को एक साथ रखने के लिए अभी भी उपयोगी तरीके हैं, खासकर जब हमारे पास ऐसे तत्व हैं जो एक को बाईं ओर और एक को दाईं ओर रहना चाहिए, कम लाइनों को लिखने के साथ बेहतर काम करते हुए फ्लोट करें, जबकि इनलाइन-ब्लॉक कई अन्य मामलों में अच्छी तरह से काम कर रहा है ।