कई पिक्सेल के "चरण" के साथ एक तत्व की चौड़ाई बदलना

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

उन लोगों के लिए जो सब कुछ पढ़ने के लिए बहुत आलसी हैं, अंतिम संस्करण के लिए एक लिंक: jsfiddle.net/XeFTr/11

क्या कहना है?

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

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

संचालन का सिद्धांत यह है कि अधिकांश ब्राउज़र बच्चे की चौड़ाई की गणना करते हैं, अगर यह प्रतिशत में निर्दिष्ट है, तो माता-पिता की चौड़ाई के आधार पर। इस प्रकार, यदि तत्व की चौड़ाई 1000% है, तो जब एक पिक्सेल द्वारा उसके माता-पिता की चौड़ाई बदल जाती है, तो तत्व स्वयं 10 पिक्सेल तक खिंच जाएगा या संकुचित हो जाएगा। दरअसल, बस इतना ही।

इस बात को 2008 में सर्गेई चिकुनकोक द्वारा लेबेदेव स्क्रेंकास्ट में IE6 में "कूद" ब्लॉक के साथ एक बग को ठीक करने के संदर्भ में वर्णित किया गया था। हालांकि, मेरे आश्चर्य के लिए, मुझे हैबे पर इस मजेदार तकनीक का विवरण नहीं मिला।

इसे कैसे लिखें?

मैं एक निर्वात में एक गोलाकार तत्व पर विचार करूंगा, जिसमें शुरू में "अतिप्रवाह: छिपा हुआ" वाला एक ब्लॉक होगा और वंशजों के एक झुंड के साथ एक बहुत विस्तृत तत्व होगा जिसकी कुल चौड़ाई आवरण की चौड़ाई से अधिक होगी:

<div class="wrapper"> <ul class="itemList"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> </div> 

 .wrapper { border: 1px solid black; margin: 10px; overflow: hidden; width: 60%; /*        */ } .itemList { height: 90px; list-style: none; margin: 0; padding: 0; width: 10000%; /*        */ } .item { background: green; /*   ,    */ display: inline; /*  ,    IE6 */ float: left; height: 80px; margin: 5px; padding: 0; width: 140px; } 

लाइव उदाहरण: jsfiddle.net/KKSCe/4

तो, हमारे पास तत्वों की एक सूची है, प्रत्येक की चौड़ाई (मार्जिन सहित) 150px है। जाहिर है, सूची का अंतिम तत्व पूरी तरह से 150 में से एक मामले में दिखाई देगा। ठीक है, 11 मामलों में: आप दृश्यता से पांच-पिक्सेल दाएं मार्जिन को छोड़ सकते हैं और स्वीकार कर सकते हैं कि बाएं मार्जिन पिछले तत्व का हिस्सा है। :-)

ऊपर दिए गए विवरण से यह स्पष्ट है कि आपको ".wrapper" ब्लॉक में एक आवरण जोड़ने की जरूरत है, और इस आवरण की चौड़ाई की तुलना में ".wrapper" खुद को 150 गुना चौड़ा करने के लिए सेट करना होगा। यह भी स्पष्ट है कि यदि आप अतिरिक्त जोड़तोड़ के बिना "चौड़ाई: 15000%" लिखते हैं, तो परिणाम कुछ ऐसा होगा जो आप नहीं चाहते हैं। यह आवश्यक है कि ".wrapper" 60% स्क्रीन की चौड़ाई बनाए रखे। यह अनुपात द्वारा गणना की गई रैपर की छोटी चौड़ाई द्वारा मुआवजा दिया जाता है।
15000/100 = 60 / x
x = 0.4
हम इस तरह लिखते हैं:

 <div class="pre-wrapper"> <div class="wrapper">......</div> </div> 

 .pre-wrapper { margin: 10px; width: 0.4%; } .wrapper { border: 1px solid black; overflow: hidden; width: 15000%; } 

लाइव उदाहरण (क्रोम या कुछ में देखें): jsfiddle.net/XeFTr/9
आप वहां देखने के क्षेत्र को बढ़ा सकते हैं और देख सकते हैं कि सब कुछ कितना अच्छा है। ब्लॉक उन चौड़ाई को स्वीकार करता है जो 150px के गुणक हैं।
यह बहुत अच्छा लगेगा!

लेकिन यह इतना चिकना नहीं है

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

समाधान काफी सरल है, लेकिन अधिक HTML की आवश्यकता है। 0.4% की चौड़ाई के साथ एक ब्लॉक बनाने के बजाय, हम दो करेंगे। पहले की चौड़ाई 1% है, दूसरे में नेस्टेड की चौड़ाई 40% है। यहाँ, ओपेरा एक व्यंजन बन जाता है।

 <div class="pre-wrapper"> <div class="opera-fix"> <div class="wrapper">......</div> </div> </div> 

 .pre-wrapper { margin: 10px; width: 1%; } .opera-fix { width: 40%; } 

लाइव उदाहरण: jsfiddle.net/XeFTr/8

यह संभव है कि 1% से कम के मूल्य का उपयोग करना अन्य ब्राउज़रों में थोड़ा बग़ल में है, लेकिन मैंने यह नहीं देखा है। अगर मैं गलत हूं तो मुझे सुधारो।
हालांकि, किसी भी मामले में, एक आंशिक प्रतिशत मूल्य विशेष रूप से अच्छा नहीं है।

इसलिए, अब फ़ायरफ़ॉक्स और IE के नवीनतम संस्करणों को छोड़कर सब कुछ हर जगह काम करता है। चलो इसे भी ठीक करें।

अत्यधिक सटीक ब्राउज़रों के लिए स्क्रिप्ट

सरलता के लिए, मैं jQuery का उपयोग करूंगा। फ़ंक्शन, साथ ही मार्कअप भी प्रयोगशाला स्थितियों के लिए है।

 $(function() { if ( $.browser.mozilla || ($.browser.msie && $.browser.version >= 8) ) { resizeFix(); $(window).resize(resizeFix); } }); function resizeFix() { var w, h = $('.wrapper'), i = $('.item').outerWidth() + parseInt($('.item').css('marginLeft')) * 2; h.width(''); w = Math.floor(h.width() / i) * i; h.width(w + 'px'); } 

अंतिम संस्करण: jsfiddle.net/XeFTr/11

मैं संक्षेप में बताता हूं

जीवन के करीब के उदाहरणों में, सभी प्रकार के तीर, फ्रेम और पसंद हैं। उनकी स्थिति (विशेष रूप से, उस तरफ से तत्वों की स्थिति, जहां ब्लॉक फैला हुआ है) बिल्कुल उसी तरह से किया जाता है।

मैंने विंडोज के लिए फ़ायरफ़ॉक्स, ओपेरा, क्रोम, IE6-9 और सफारी में प्रदर्शन की जाँच की।
यह सभी विभिन्न सफारी के तहत MacOS, Konqueror, आदि के तहत देखना बहुत अच्छा होगा।
मुझे टिप्पणियों / सुधारों पर भी खुशी होगी।

लेखन इस विषय पर ऊपर और बाद के स्वतंत्र अनुसंधान और प्रयोगों में वर्णित पेंचकस पर आधारित है।