ब्लॉक के विपरीत पक्षों पर पोजिशनिंग तत्व

नमस्कार प्रिय पाठकों। आज मैं आपको उस ब्लॉक के विभिन्न किनारों पर दो तत्वों को फैलाने के एक छोटे से ज्ञात तरीके के बारे में बताऊंगा जिसमें वे स्थित हैं। इस तरह के उदाहरण के लिए



कुछ समय तक, मैं, आप में से कई, दो तरीकों का इस्तेमाल करते थे:

1. पहली विधि फ्लोट संपत्ति पर आधारित है। बाएं ब्लॉक को फ्लोट पर सेट किया गया है: बाएं, दाएं फ्लोट पर: दाएं
2. दूसरी विधि में दाएं ब्लॉक की पूर्ण स्थिति होती है, जिसमें पैरामीटर दाएं: 0 या बाएं: 100%, मार्जिन-बाएं: - (ब्लॉक चौड़ाई) होता है।

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

तो, विधि संख्या 3. शुरू करने के लिए, कोड:

HTML ही

Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >

1. Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >
   
   
   
   
2. Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >
   
   
   
   
3. Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >
   
   
   
   

सीएसएस ही

Copy Source | Copy HTML

1. .wrap {
2. चौड़ाई : 500 पीएक्स ;
3. पृष्ठभूमि : # 555 ;
4. ऊंचाई : 500 पीएक्स ;
5. }
6. .left । ठीक है। "
7. प्रदर्शन : इनलाइन - ब्लॉक ;
8. // प्रदर्शन: इनलाइन;
9. // ज़ूम: 1;
10. चौड़ाई : 100% ;
11. मार्जिन-राइट : -100% ;
12. ऊर्ध्वाधर-संरेखित करें : नीचे ;
13. }
14. । ठीक है {
15. पाठ-संरेखण : सही ;
16. }
17. .left a .right a { display : इनलाइन - ब्लॉक ; स्थिति : रिश्तेदार ; }
18. .left a { चौड़ाई : 200px ; ऊंचाई : 100 पीएक्स ; पृष्ठभूमि : हरा ; }
19. । ठीक एक चौड़ाई : 100px ; ऊंचाई : 200 पीएक्स ; पृष्ठभूमि : गुलाबी ; }

स्पष्टीकरण

विधि का सार मार्जिन-राइट: -100% का उपयोग करके एक-दूसरे के ऊपर ब्लॉक को ओवरले करना है और पाठ-संरेखण के साथ दाएं ब्लॉक की सामग्री को दाईं ओर संरेखित करें: दाएं।

एक ही पंक्ति पर दोनों ब्लॉक (दाएं और बाएं) लिखना उचित है, अन्यथा, लाइन ब्रेक चरित्र के कारण, सही ब्लॉक मूल ब्लॉक की सीमाओं से थोड़ा बाहर रेंगना होगा।

लिंक को स्थिति पर सेट किया जाना चाहिए: सापेक्ष, अन्यथा कुछ अतिव्यापी ब्लॉक के कारण क्लिक करने योग्य नहीं हो सकते हैं।

विधि के फायदे

मुख्य प्लस यह है कि अब ऊर्ध्वाधर-संरेखण हमारे ब्लॉकों के लिए काम करना शुरू कर देता है। और हम आसानी से ऊपरी सीमा पर और निचले और केंद्र में दोनों को संरेखित कर सकते हैं।

विधि का विपक्ष

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



तैयार उदाहरण से लिंक करें

पुनश्च

मैंने इंटरनेट पर ऐसी कोई विधि नहीं देखी है, इसलिए, एक निवेदन: यदि कोई ऐसा ही लेख पहले प्रकाशित हुआ है, तो कृपया मुझे बताएं

Upd।

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