2010-08-19 20 views
5

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

  • http://jsfiddle.net/qyMxv/
    निर्दिष्ट गद्दी के साथ div के भीतरी तत्व div अंतरिक्ष के बाहर चला जाता है। क्या div के अंदर सबकुछ संलग्न नहीं होना चाहिए? अन्यथा करने का क्या मतलब है?

  • http://jsfiddle.net/wk9Kg/
    अभिभावक div पूरी तरह से गायब हो जाता है, जबकि बच्चे सामान्य रूप से दिखाए जाते हैं। और भी अजीब बात यह है कि यह व्यवहार float:left; द्वारा ट्रिगर किया गया है।

क्या कोई ट्यूटोरियल/संदर्भ पुस्तक है जो मुझे इन quirks में तर्क देखने में मदद कर सकता है? मैंने कुछ समय के लिए w3schools पर भरोसा किया लेकिन वे इस विषय पर बहुत संक्षिप्त हैं। वेब पर अच्छी सामग्री ढूंढना भी मुश्किल हो गया। अभी मैं display, position और float गुणों के साथ बस काम करता हूं जब तक यह काम नहीं करता है।

धन्यवाद!

+2

w3schools पर भरोसा करके एक अच्छा विचार नहीं है सहित कोर अवधारणाओं, पर एक अनुभाग है। अच्छे शुरुआती गाइड, बुरे रिफ्रेंस। –

उत्तर

3

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

अधिक जानकारी के लिए spec देखें:

के बाद से एक नाव प्रवाह में नहीं है, गैर तैनात ब्लॉक बक्से से पहले और नाव बॉक्स के बाद प्रवाह खड़ी मानो नाव नहीं किया बनाया मौजूद है।

6
  1. आम तौर पर div संलग्न/किसी भी अपेक्षाकृत या staticly तैनात, गैर जारी तत्व के अंदर शामिल करने के लिए माना जाता है, लेकिन तुम्हारे पास है, जैसा कि आप इनलाइन तत्व पर गद्दी के साथ भाग प्राप्त कर सकते हैं, या नकारात्मक मार्जिन के साथ/स्थिति के साथ नकारात्मक मूल्य। यह मुझे लगता है कि अधिक लचीला लेआउट के लिए अनुमति देता है।

  2. फ़्लोट्स को प्रवाह से बाहर नहीं रखा जाना चाहिए, जब तक कि आपके पास बाद में कोई तत्व समाशोधन न हो, या ओवरफ़्लो दिखाई देने के अलावा किसी अन्य चीज़ पर सेट हो। आईई 7/आईई 6 में आपको केवल हैलाउट ट्रिगर करने की आवश्यकता है जो कई संपत्ति/मूल्य combos के माध्यम से किया जा सकता है (यह spec के खिलाफ चला जाता है)। http://work.arounds.org/clearing-floats/ को फ़्लोट (ओं) के अंदर साफ़ करने के तरीकों के लिए देखें।

यहाँ है कि मैं एक और सवाल से संकलित क्रॉस-ब्राउज़र कीड़े के लिए साइटों की एक सूची है:

+0

प्रतिक्रिया के लिए धन्यवाद! क्या आप # 1 पर थोड़ा सा स्पष्टीकरण दे सकते हैं? _ लेकिन आप इनलाइन तत्व पर पैडिंग से दूर हो सकते हैं क्योंकि आपके पास यह है जैसा कि मेरे पास है, ऐसा लगता है कि यह काम नहीं कर रहा है। _or ऋणात्मक मार्जिन/ऋणात्मक मानों के साथ स्थिति सापेक्ष_ के साथ मुझे सामान्य विचार है कि नकारात्मक मार्जिन कैसे काम करते हैं, लेकिन यह सुनिश्चित नहीं है कि मैं इस चाल को समझता हूं। माता-पिता पर नकारात्मक मार्जिन? बीटीडब्लू, मेरा वर्तमान कामकाज यहां बच्चों को "डिस्प्ले: इनलाइन-ब्लॉक" घोषित करना है (हालांकि मैं अभी तक आईई में इसका परीक्षण नहीं करता हूं)। Qurks मोड के लिए –

2
  • एरिक मेयर का CSS: The Definitive Guide एक अच्छा संदर्भ है। यह पुराना है, लेकिन बॉक्स मॉडल नहीं बदला है।
  • quirksmode में ब्राउज़र-विशिष्ट व्यवहार की अच्छी व्याख्या है।
  • # 2 उदाहरण के लिए, अगर आप दूसरा काला ब्लॉक या और ऊंचाई और कंटेनर <div>
+0

+1। positioniseverything.net दिन में मेरे लिए भी एक अच्छा संसाधन था ... पता नहीं है कि यह अभी भी अद्यतित है या नहीं। – prodigitalson

1

अपने पहले प्रश्न के बारे में करने के लिए चौड़ाई के बाद <div style="clear: both;"></div> जोड़ने या तो कर सकते हैं, यहाँ मेरी पसंदीदा विधि है खाली बिना एक कंटेनर में तैरता समाशोधन के लिए तत्व: http://www.quirksmode.org/css/clearing.html

1

मुझे क्रिस कोयियर के लेख अच्छी तरह लिखे गए हैं और समझने में आसान हैं।उन्होंने Floats जैसे विषयों और Box Model

आशा इस मदद करता है, जद