फ्लोट संपत्ति के व्यावहारिक उपयोग के बारे में

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

1. बाएं, दाएं मान निर्धारित करते हैं कि किस तरफ तत्व गठबंधन किया जाएगा;
2. बाएं, दाएं मान वाले तत्व ब्लॉक हो जाते हैं (प्रदर्शन संपत्ति मूल्यों पर उच्च प्राथमिकता वाले);
3. अस्थायी तत्व अगले तत्व (और इसमें संलग्न अन्य तत्व), माता-पिता के अगले पड़ोसी तत्वों, साथ ही पिछले पड़ोसी लोअरकेस तत्वों के चारों ओर लपेटा जाता है;
4. एक अस्थायी तत्व सामग्री की चौड़ाई पर कब्जा कर लेता है, सिवाय इसके कि अगर आंतरिक तत्व नॉन-फ्लोटिंग हैं (इस पर फ्लोट मैजिक आर्टिकल में चर्चा की गई थी : स्पेसिफिकेशन में "फ्लोट" न करने की कोशिश करें ताकि धारा में न डूबें );
5. पिता की ऊंचाई बच्चे के तैरने वाले तत्व की ऊंचाई पर निर्भर नहीं करती है, निम्नलिखित गैर-अस्थायी तत्वों के लिए, अस्थायी तत्वों से बाहरी मार्जिन काम नहीं करेगा;
6. एक तत्व जिसके लिए पिछले पड़ोसी तत्व तैर रहा है, अगर पिता की चौड़ाई अनुमति देती है तो वह उसके चारों ओर लपेटेगा; अन्यथा, यह पिछले अस्थायी तत्व के चारों ओर लपेटेगा;
7. तत्व तब तक नहीं तैरेंगे जब तक कि पिता की चौड़ाई की अनुमति न हो;
8. स्थिति संपत्ति के पूर्ण और निश्चित मान फ्लोट संपत्ति को ओवरराइड करते हैं।

यह ज्ञात है कि एक ब्लॉक तत्व एक अलग लाइन पर स्थित है, लेकिन पिछले आसन्न लाइन तत्व फ्लोटेड तत्व के चारों ओर लपेटते हैं।

एक उदाहरण:

<span>2</span> <div style=”float: left;”>1</div> 

परिणाम:

12

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

लेकिन मैं अतिरिक्त व्यावहारिक अनुप्रयोग देना चाहूंगा।

1. इस तरह के मार्कअप के लिए क्या शैलियों को लिखना है

 <dl> <dt>:</dt> <dd>Apple</dd> <dt> :</dt> <dd>10</dd> <dt> :<dt> <dd>- FaceTime HD  </dd> </dl> 

इस तरह दिखना:


सब कुछ सरल है:

 dt{ float: left; } 

यदि आयाम सीमित हैं:

 dl{ width: 500px; } 

परिणाम:

अतिरिक्त सुविधाओं के तहत माइक्रोफोन गिर गया :

इस मामले में, आपको बस जोड़ने की आवश्यकता है

 dd{ overflow: hidden; } 

परिणाम:

परिणाम एक छोटा कोड है:

 dl{ width: 500px; } dt{ float: left; } dd{ overflow: hidden; } 

2. जैसा कि ऊपर उल्लेख किया गया है, फ़्लोट किया गया तत्व सामग्री की चौड़ाई लेता है, और अगर हमें ऐसा मेनू बनाने की आवश्यकता है:

यह सुविधा हमारी मदद करेगी।

इस शर्त के तहत कि पृष्ठभूमि का रंग ली तत्व पर सेट होना चाहिए:

Rozmetka:

 <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> 

मूल शैलियों:

 ul > li { float: left; background-color: #eee; margin: 4px 0; padding: 4px; } 

फ्लोट: सामग्री की चौड़ाई को सीमित करने के लिए बाएं - की आवश्यकता होती है।

लेकिन यह नोटिस करने के लिए एक लेआउट पेशेवर होना आवश्यक नहीं है: यदि उल की चौड़ाई तत्वों को एक दूसरे के चारों ओर प्रवाह करने की अनुमति देती है, तो निम्नलिखित कार्य समाप्त हो जाएंगे:



फिर फ्लोट और स्पष्ट गुणों का एक गुच्छा बचाव के लिए आता है। यह स्पष्ट लिखने के लिए चयनकर्ता उल> ली के लायक है: बाएं, और सब कुछ जगह में गिर जाएगा।

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

हमारे पास निम्नलिखित मार्कअप हैं:

 <div class="leftColumn">lorem ispum</div> <div class="rightColumn"> <p class="block1">lorem ispum</p> <p class="block2">lorem ispum</p> <div class="block3">lorem ispum</div> </div> 

और शैलियों:

 .leftColumn { width: 200px; height: 200px; float: left; background: #f55; } .rightColumn { margin-left: 220px; background: #5ff; } .rightColumn .block1, .rightColumn .block2 { float: left; width: 200px; margin-right: 20px; background: #ebde05; } .rightColumn .block3 { background: #9e9; clear: both; } 

नोट: विचार के पीछे, वर्ग ब्लॉक 3 (हरा) के साथ एक तत्व कक्षाओं ब्लॉक 1, ब्लॉक 2 (पीला) के साथ तत्वों के बाद स्थित होना चाहिए और एक नई पंक्ति के साथ शुरू होना चाहिए।

परिणामस्वरूप:

यहाँ क्या हुआ? वर्ग ब्लॉक 3 (हरा) के साथ एक तत्व, नियम कार्रवाई स्पष्ट है: दोनों; लाल खंड सहित धारा को मंजूरी दे दी।

इस स्थिति से बाहर निकलने के कई तरीके हैं। यह सब कार्य पर निर्भर करता है:

• एक तत्व को सही कॉलम के साथ सेट करें ओवरफ्लो नियम: छिपा हुआ;
  परिणाम:
  
• तत्व को नियम के साथ कक्षा सही रूप में सेट करें फ्लोट: बाएं; लेकिन तब आपको मार्जिन-लेफ्ट को हटाना होगा: 220px; और अब क्लास राइट-कॉलम के साथ तत्व ब्राउज़र विंडो की शेष चौड़ाई पर कब्जा नहीं करेगा;
• एक तत्व में वर्गों ब्लॉक 1, ब्लॉक 2 के साथ तत्वों को लपेटें, इसे अतिप्रवाह स्थापित करना: छिपा हुआ; या प्रदर्शन: टेबल-सेल; (ie7 के लिए - ज़ूम: 1;)

धारा को साफ करने और स्पष्टता नामक तत्व की ऊंचाई निर्धारित करने की परिचित विधि यहां उपयुक्त नहीं है।

4. फ्लोट और अतिप्रवाह के गुणों के ज्ञान के साथ सशस्त्र, हम निम्नलिखित मेनू बनाते हैं:

अंकन:

 <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> 

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

शैलियों:

 ul li { float: left; border-width: 0 3px; border-style: solid; border-left-color: #5FF; border-right-color: red; padding: 0 5px; } 

नतीजतन, हम प्राप्त करते हैं:

ली के लिए नकारात्मक आंतरिक मार्जिन का उपयोग करना और उल के लिए फ्लोट और अतिप्रवाह गुण, हमें अतिरिक्त शैलियाँ मिलती हैं:

 ul{ overflow: hidden; float: left; } ul li { margin: 0 -3px; } 

जैसा कि आप देख सकते हैं, सीमा जगह से बाहर है, यह केवल बाईं और दाईं सीमाओं के रंग मूल्यों को बदलने के लिए बनी हुई है, यह इस कोड को बदल देती है:

 ul { overflow: hidden; float: left; } ul li{ float: left; border-width: 0 3px; border-style: solid; border-left-color: red; border-right-color: #5ff; padding: 0 5px; margin: 0 -3px; } 

बेशक, आंतरिक मार्जिन 3px कम हो गया है, इसलिए आपको उन्हें 3px तक बढ़ाने की आवश्यकता है:

 ul { overflow: hidden; float: left; } ul li{ float: left; border-width: 0 3px; border-style: solid; border-left-color: red; border-right-color: #5ff; padding: 0 8px; margin: 0 -3px; } 

हमें तैयार मेनू मिलेगा:


मैंने फ्लोट संपत्ति की बारीकियों और व्यावहारिक उदाहरणों के संबंध में सब कुछ का उल्लेख नहीं किया है, लेकिन मैं उपयोगी लेखों के लिए कुछ और लिंक दूंगा:

• फ्लोट संपत्ति पर विवरण
• फ्लोट उन्माद: सीएसएस फ्लोट संपत्ति कैसे काम करती है, इसका स्पष्टीकरण

ImageCMS ब्लॉग अनुभाग "अपने आप में सुधार - सीएसएस !" लेख में वेब पृष्ठों के प्रभावी लेआउट पर एक प्रशिक्षण सामग्री है।

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

मैं उपरोक्त सभी मूल्यों में केवल एक चीज जोड़ना चाहता हूं: हैप्पी प्रोग्रामर डे, दोस्तों और सहकर्मियों! आसान कोडिंग, आठवीं डिग्री में आपको और हमें दोगुना भुगतान!