एक ही समय में रबर वक्ताओं खींच

यह इस पोस्ट से प्रेरित था, जहां लेखक को स्पष्ट रूप से जवाब देने वाला उत्तर कभी नहीं मिला था ।

मुर्दों को मत छुओ

... यह वाक्यांश मेरे दिमाग में तब आया जब मैंने इस सरल दिखने वाले मॉकअप को एक रास्ता खोजने के लिए सोचा। फिर भी, IE के पुराने संस्करणों के तहत लगभग कोई भी टाइपसेट नहीं करता है। इनमें से कुछ लोगों को यकीन है कि इस तरह से वे वेब के विकास में एक अमूल्य योगदान देते हैं, हालांकि IE6 / 7 के तहत उनके लिए कोई समस्या नहीं है। दूसरों के लिए, "पुराने ब्राउज़र जिसे किसी की ज़रूरत नहीं है" को अनदेखा करना सुविधाजनक है, क्योंकि वे कभी नहीं जानते थे कि उन्हें कैसे टाइप करना है।

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

और अभी तक

तो, रबर कॉलम एक साथ खींच रहे हैं।
यह एक पृष्ठभूमि-मिश्रण के साथ सिद्धांत पर आधारित है, क्योंकि ie6 / 7 केवल तालिका में ब्लॉकों के युगपत "खींच" को समझता है। लेकिन क्या हम शांत हैं? दिवस पर हम थोपते हैं।
सबसे पहले, आपको निर्णय के मुख्य बिंदु को समझने की आवश्यकता है कि एक ही समय में कॉलम खिंचाव नहीं करेगा। लेकिन घोंसले के शिकार की मदद से, हम यह उपस्थिति बनाएंगे।

यह उदाहरण एक सादे पृष्ठभूमि के लिए बनाया गया है, लेकिन मुझे लगता है कि इसे "शांत" पृष्ठभूमि के लिए पूरा करना मुश्किल नहीं होगा। मुख्य बात यह समझना है कि सब कुछ कैसे काम करता है।

एचटीएमएल

<div id="main"> <div class="holder"> <div id="content"> <p>Lorem ipsum dolor sit amet</p> </div> <div id="sidebar"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> </div> </div> </div> 

चरण 1

सीएसएस

 #main{ background:#ccc; /*       */ padding:0 0 0 15%; /* 15% -      */ } 

यहां हमने ब्लॉक को भरने और साइडबार के लिए "मुक्त" किया।

चरण 2

 .holder{ background:#999; /*     */ width:100%; /* ie6/7 layout */ } .holder:after{ clear:both; content:' '; /* layout     */ display:block; } 

वे सामग्री भाग पर भरण सेट करते हैं और एक धारक के साथ लेआउट प्रदान करते हैं, क्योंकि अब से हम सामग्री और साइडबार को फ्लोट करेंगे।

चरण 3

 #sidebar{ float:left; margin:0 0 0 -17.6%; position:relative; /* ie6/7 fix */ width:17.6%; } 

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



यानी स्तंभ बढ़ा रहे हैं! सच है, स्तंभों में से एक अभी भी दूसरे के नीचे है। लेकिन इस समस्या को हल करने के लिए, हम बस सामग्री को तैरते हैं।

 #content{ float:right; /* ,  .    , ie6   */ width:100%; } 

हो गया!

इसके विपरीत, यदि साइडबार को ठीक करने की आवश्यकता है, तो पिक्सल में मुख्य, मार्जिन और चौड़ाई पर पेडिंग का आकार पिक्सेल में तय किया गया है।

अगला, मैं इंडेंटेशन मानों की गणना दे दूँगा।

 #main{ padding:0 0 0 15%; } #sidebar{ margin:0 0 0 -17.6%; width:17.6%; } 

ये 17.6% शुरुआत में 15 प्रतिशत इंडेंटेशन से कहाँ आते हैं?
सब कुछ सरल है। 17.6% वह हिस्सा है जो 85 प्रतिशत धारक का 15 प्रतिशत साइडबार बनाता है।
यानी 15/85 = 0.17647 ...
तदनुसार, यदि साइडबार X की चौड़ाई, तो चौड़ाई और मार्जिन की गणना सूत्र द्वारा की जाती है
X / (100 - X)

सुरक्षित करने के लिए:

यदि साइडबार की चौड़ाई 40% है, तो सीएसएस इस तरह दिखेगा:

 #main{ padding:0 0 0 40%; } #sidebar{ margin:0 0 0 -66.7%; width:66.7%; } 

मुझे लगता है कि आपने देखा कि ie6 / 7 के लिए पहले से ही दो सुधार हैं। और यहां तक ​​कि, वैराटली की चौड़ाई को इस तरह के एक फिक्स माना जा सकता है।
वह सब है। मुझे आशा है कि कोई काम आएगा! सभी को शुभकामनाएँ।