चौड़ाई में ब्लॉकों का एक समान संरेखण

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

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


आंकड़ा दिखाता है कि आइटम चौड़ाई में गठबंधन किए गए हैं, बगल की दीवारों से सटे हैं और उनके बीच इंडेंट बनाना बराबर है।

यह कैसे काम करता है?

अनिवार्य रूप से, हमें text-align: justify करना चाहिए text-align: justify पाठ के साथ क्या text-align: justify है। चूंकि हमारे ब्लॉकों का व्यवहार इस संपत्ति की मदद से एक स्ट्रिंग में शब्दों को संरेखित करने के परिणाम के समान है। मुझे लगता है कि कई पहले से ही लगभग कल्पना करते हैं कि यह संपत्ति और इसके अनुमानित कार्य क्या हैं।

* इस समीक्षा में, मैंने पूरे एल्गोरिथ्म के चरणों का विश्लेषण पोस्ट नहीं किया, आप इस बारे में लेख में ही पढ़ सकते हैं । मुख्य बात यह है कि आप सार को समझते हैं।

हमारी चुनौती

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

* मैं आपको तुरंत सूचित करना चाहता हूं कि विकल्प (काम करना और बहुत नहीं) वास्तव में 4 टुकड़े के रूप में निकला, साथ ही दिलचस्प और उपयोगी असंतुष्ट बारीकियों का एक गुच्छा, एक विशाल लेख (मेरी शैली में) के लिए। इसलिए, यहाँ मैं संक्षेप में उनमें से कुछ का वर्णन करूंगा :)

विकल्प 1 और 2

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

विकल्प 3

लेकिन तीसरा विकल्प पहले से ही text-align: justify एल्गोरिथ्म पर ही बनाया गया है text-align: justify और इनलाइन ब्लॉक, जिनके पास फल हैं, लेकिन काफी नहीं। सबसे पहले, मुझे एक अतिरिक्त, अतिरिक्त तत्व के साथ सूची को पतला करना पड़ा, और दूसरी बात, IE6-7 में दिलचस्प तथ्यों की खोज की गई थी कि मैं अफवाह के माध्यम से बहुत खुश था। इन ब्राउज़रों में, इस समाधान ने काम करने से इनकार कर दिया। और लगता है कि मेरी सहायता के लिए कौन आया। यह सही है, SelenIT2 ! लेकिन वह एक नहीं, बल्कि एक महान विचार के साथ आया था (जो उन्होंने ग्रेटरश कार्यशाला में हमारे सामान्य सहयोगी से चुरा लिया था), जिनसे मैं अभी सदमे में था। जैसा कि यह निकला, प्राचीन समय से जादुई CSS3 के गुणों के एक जोड़े इस समाधान को क्रॉस-ब्राउज़र समाधान में बदल सकते हैं और text-align: justify हमारे पुराने IE6-7 में text-align: justify का text-align: justify ।

तीसरा विकल्प

पूरा रहस्य निम्नलिखित कोड की अंतिम पंक्ति में था:

 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li class="helper"></li> </ul> 

 ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /*   */ line-height: 0; font-size: 1px; /* 1px  Opera */ /*   IE6-7*/ text-justify: newspaper; } 

जैसा कि आप देख सकते हैं, text-justify: newspaper; का उपयोग कर text-justify: newspaper; ul साथ ul हमारा संस्करण क्रॉस-ब्राउज़र बन जाता है। यह इस तथ्य के कारण है कि पाठ-औचित्य: समाचार पत्र संपत्ति को अक्षरों के बीच और शब्दों के बीच अंतर को बढ़ाने या कम करने के लिए डिज़ाइन किया गया है। MSDN कहती है कि यह चीज़ "लैटिन वर्णमाला के लिए संरेखण का सबसे परिष्कृत रूप है", लेकिन इस लेख में यह भी कहा गया है कि अरबी ग्रंथों के लिए यह संपत्ति स्वयं पत्रों का विस्तार करती है।

विकल्प 4

खैर, विकल्प 4 अतिरिक्त मार्कअप की अस्वीकृति थी, जिसके कारण IE6-7 में नई समस्याएं पैदा हुईं।

यह पता चला है कि text-justify: newspaper केवल हमारे पत्रों (इनलाइन-ब्लॉक) को फैलाना संभव बनाता है, लेकिन कमांड नहीं। सीधे शब्दों में कहें, वह रेखा को बताता है कि वह कैसे इसे फैलाना चाहता है, और text-align: justify एक तन्यता बल है। यानी text-align: justify लाइन खींचने के लिए जिम्मेदार है, और text-justify: newspaper केवल यह निर्दिष्ट करता है कि वास्तव में यह स्ट्रेचिंग कैसे होगी।

तीसरे विकल्प की समीक्षा में, मैंने कहा कि सेलेनिट 2 ने मुझे दो गुण दिए, जिनमें से एक ने (पाठ-औचित्य: समाचार पत्र) पिछले संस्करण में हमारी मदद की, और दूसरे ने इसमें मदद की! और इस बार वे एकजुट हुए और पहले से ही दोहरी शक्ति के साथ अंतिम विकल्प को हराने में सक्षम थे।

 ul { font: 14px Verdana, Geneva, sans-serif; text-align: justify; /*   */ line-height: 0; font-size: 1px; /* 1px  Opera */ /*   IE6-7*/ text-justify: newspaper; zoom:1; /*     */ text-align-last: justify; } 

मुझसे मिलो! text-align-last - एक गुण जो text-align: justify की बहुत अंतिम पंक्ति में एल्गोरिथ्म को text-align: justify है, यदि यह एक ही text-align: justify उस पर लागू होता है। सीधे शब्दों में कहें, जब हम सामान्य text-align: justify लागू करते हैं text-align: justify पाठ को text-align: justify , तो यह देखते हुए, text-align-last यह पहली बार इंगित करता है कि यह बुरी तरह से कर रहा है और इसे अब अंतिम पंक्ति में भी काम करना होगा।

और अब, वास्तव में, परिणाम

वैसे, इन गुणों को निर्दिष्ट किया जाता है , न कि कुछ स्वामित्व (अखबार के मूल्य को छोड़कर, जिसे अब अलग तरीके से कहा जाता है)। तो कोई बिल्ली का बच्चा पीड़ित नहीं होगा) और मैं इस बात पर जोर देना चाहता हूं कि CSS3 का उपयोग करके IE6-7 बग पर काबू पा लिया गया था - इससे पहले किसने देखा था? :)

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

यदि किसी के लिए एक संक्षिप्त समीक्षा पर्याप्त लग रही थी, तो मैं इस (पहले से बड़े) लेख को पूरी तरह से डीब्रीफिंग के साथ पढ़ने की सलाह देता हूं। लेकिन, मैं आपको चेतावनी देता हूं! लेख वास्तव में छोटा नहीं है, इसलिए पढ़ने से पहले, चाय के साथ अपने पसंदीदा कुकीज़ पर स्टॉक करना बेहतर है :)