क्या फ्लैट खराब हैं? इसकी जगह

Question

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

मैं एक एचटीएमएल 5 डिजाइन है कि मैं अभी-अभी समाप्त है और यह फ़ायरफ़ॉक्स और क्रोम में शानदार लग रहा है, लेकिन जब एक्सप्लोरर संस्करण चला अन्य कंप्यूटरों से परीक्षण किया 7, 8 और 9, डिजाइन बिल्कुल फट। यह मुझे लगता है कि मुझे लगता है कि इस डिजाइन में जो भी मैंने सही किया है, वह आईई में सम्मानित नहीं है। ऐसा लगता है कि इसके बावजूद जो कुछ भी है, उसके नीचे लपेटना प्रतीत होता है।

मैं जानना चाहता हूं कि क्या मैं फ्लोट के साथ ठीक हूं या यदि मुझे इसके बजाय inline-block का उपयोग करना चाहिए। inline-block का उपयोग करके, एक दूसरे के बगल में दो divs होने के बावजूद एक दूसरे के आगे और दूसरी दाईं ओर एक उदाहरण के बारे में एक उदाहरण है।

मुझे यहां एक और दुविधा है कि उम्मीद है कि कोई मेरी मदद कर सकता है। मैं एक पुरानी विकास मशीन पर हूं जो एक्सपी एसपी 1 चला रहा है। सबसे अच्छा आईई ब्राउज़र जिसे मैं परीक्षण कर सकता हूं 6 है। मैं किसी भी तरह से ऐसा कुछ पकड़ना चाहता हूं जो मुझे संस्करण 7, 8 और 9 (और 10 अगर यह अभी तक बाहर हो) का परीक्षण करने की अनुमति दे। क्या कोई इसके लिए किसी भी समाधान की सिफारिश कर सकता है?

Answer 1

तैरता लेआउट के लिए कभी नहीं किया गया।

वे केवल एक तत्व लेने के लिए हैं, इसे एक तरफ रखें, और अन्य सामग्री को इसके चारों ओर बहने दें। बस इतना ही।

तो हम उन्हें लेआउट के लिए क्यों उपयोग कर रहे हैं?

क्योंकि आप एक पाद लेख साफ कर सकते हैं दो शुरु नीचे कॉलम, नाव लेआउट अस्तित्व में आया। यदि तैनात तत्वों के नीचे तत्वों को "स्पष्ट" करने का कोई तरीका रहा है, तो हम लेआउट के लिए फ्लोट का उपयोग करने के लिए कभी भी परेशान नहीं होंगे।

हम अभी भी लेआउट के लिए उनका उपयोग क्यों कर रहे हैं?

क्योंकि बेहतर विकल्प, जैसे CSS Flexible Box Layout Module और CSS Template Layout Module अभी भी काम कर रहे ड्राफ्ट हैं और सभी ब्राउज़रों द्वारा समर्थित नहीं हैं।

आईई 7,8 और 9 में आपका डिज़ाइन क्यों टूटता है?

शायद आपके कोड के साथ कोई समस्या है, यानी, आप फ्लोट्स का उपयोग नहीं कर रहे हैं। यह पूरी तरह से आपकी गलती नहीं है, क्योंकि वे पहले स्थान पर लेआउट के लिए कभी नहीं थे। हालांकि, मैं आपको आश्वस्त कर सकता हूं कि वे काम करते हैं। मैं लंबे समय तक लेआउट के लिए फ्लोट्स का उपयोग कर रहा हूं और हमेशा इसे अधिकांश ब्राउज़रों में काम करने में सक्षम था।

इनलाइन ब्लॉक बेहतर हैं?

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

संदर्भ

Floats Don’t Suck If You Use Them Right

Answer 2

फ़्लोट्स को ठीक काम करना चाहिए, हालांकि यह इस बात पर निर्भर करता है कि आपने इसका उपयोग कैसे किया है - आपके डिज़ाइन के लिंक के बारे में कैसे?

इनलाइन-ब्लॉक सही ढंग से इंटरनेट एक्सप्लोरर संस्करण 8 से कम समय में काम नहीं करता है: http://www.quirksmode.org/css/display.html

Answer 3

आप इनलाइन में इस उदाहरण का उपयोग कर सकते

<div id="firstdiv"> 
    That is the first div 
</div> 
<div id="seconddiv"> 
    That is the second div 
</div> 

style.css

#firstdiv{ 
     display:inline; 
     background-color: #f00; 
    } 

    #seconddiv{ 
     display:inline; 
     background-color: #00f; 
    } 

यह IE8 में काम करते हैं और अधिक है लेकिन अगर हो जाएगा आप आईई 6 ए में इसका इस्तेमाल करना चाहते हैं nd 7 style.css

#firstdiv{ 
    display:block; 
    background-color: #f00; 
    float: left; 
} 

#seconddiv{ 
    display:block; 
    background-color: #00f; 
    float: right; 
} 

में निम्न कोड बनाने के लिए यदि आप एचटीएमएल 5 और CSS3 का उपयोग करें और आप इसे IE6 के साथ काम करना चाहता हूँ लेख निम्नलिखित 5 Tools to Make IE Play Nice With CSS3 and HTML5 in WordPress

आप उस लेख पढ़ सकते हैं पढ़ा भी यह बहुत उपयोगी है difference between block, inline and inline-block