सीएसएस: प्रतिशत और सीमाओं में चौड़ाई

Question

मैंने प्रतिशत में कंटेनरों की चौड़ाई परिभाषित की है। मैं एक सीमा (चौड़ाई के दायीं तरफ 3 पीएक्स) जोड़ना चाहता हूं, क्योंकि कंटेनर चौड़ाई% में है जबकि सीमा चौड़ाई पीएक्स में है, मैं कंटेनर की चौड़ाई को कैसे समायोजित कर सकता हूं?

<div class="wrap"> 
    <div class="left">...</div> 
    <div class="right">...</div> 
</div> 

.wrap{ 
    width:100%; 
} 

.left{ 
    width:30%; 
} 

.right{ 
    width:70%; 
} 

मैं बाएं के दाहिने तरफ 3px सीमा जोड़ना चाहता हूं। उदाहरण के लिए:

.left{ 
    width:30%; 
    border:3px solid #000; 
} 

चूंकि मैंने% में चौड़ाई परिभाषित की है, बाएं की चौड़ाई को फिर से समायोजित करने का सबसे अच्छा तरीका क्या है। मैं चौड़ाई को लगभग 2 9% तक घटा सकता हूं, लेकिन मैं ठीक से करना चाहता हूं।

Answer 1

उपयोग box-sizing: border-box संपत्ति। यह तत्व की कुल चौड़ाई (हालांकि मार्जिन नहीं) के हिस्से के रूप में पैडिंग और सीमा का इलाज करने के लिए बॉक्स मॉडल के व्यवहार को संशोधित करता है। इसका मतलब है कि तत्व की सेट चौड़ाई या ऊंचाई पैडिंग और सीमा के लिए सेट आयाम शामिल हैं। आपके मामले में, इसका मतलब तत्व की चौड़ाई और इसकी सीमा की चौड़ाई उपलब्ध स्थान का 30% उपभोग करेगी।

.left { 
    width: 30%; 
    border: 3px solid #000; 

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
} 

अधिक जानकारी MDN और Quirksmode पर पाया जा सकता: इसके लिए

समर्थन सही नहीं है, फिर भी विक्रेता उपसर्गों सबसे अगर नहीं सभी आधुनिक ब्राउज़रों पकड़ लेंगे।

According to Quirksmode, ऊपर (-moz-, -webkit- और -ms-) 3 विक्रेता उपसर्गों का उपयोग कर, आप सभी ब्राउज़रों, यहां तक ​​कि IE8 के लिए समर्थन मिलता है।

Answer 2

कि थोड़ा मुश्किल है, लेकिन एक तरह से पर इस पोस्ट की जाँच उसके चारों ओर पाने के लिए:

• Percentage Plus Pixel Sizing (और Example)
• Box Sizing on CSS-Tricks (और Example)

box-sizing संपत्ति हो सकती है आपके लिए भी रूचि है, इसे देखें:

• How do I add 1px border to a div whose width is a percentage?

Answer 3

सबसे आसान क्रॉस-ब्राउज़र तरीका बाहरी divs पर सीमा निर्धारित नहीं करना है, और इसके बजाय .left के अंदर इसे एक नए div पर सेट करना है। सरल, और अच्छी तरह से काम करता है।

Answer 4

बस

border-width: 10px; 

तरह vw को px बदलने के लिए

border-width: 10vw; 

इसका करते क्या प्रतिशत कर ....