सीएसएस में 100% के 1/3 का प्रतिनिधित्व करने का सबसे अच्छा तरीका?

Question

मेरे पास एक बड़ा <div> है जिसमें तीन छोटे <div> के अंदर, इनलाइन है। उनमें से प्रत्येक की 33% चौड़ाई है, लेकिन इससे कुछ संरेखण समस्याएं होती हैं क्योंकि 3 * 33%! = 100%। इस तरह सीएसएस में एकदम सही तीसरा प्रतिनिधित्व करने का सबसे अच्छा तरीका क्या है? शायद 33.33%?

Answer 1

क्या आप मार्जिन के लिए कोई भत्ता बना रहे हैं? आप केंद्र कॉलम के दोनों तरफ 5% मार्जिन के साथ प्रति कॉलम 30% जा सकते हैं।

Quick example

Answer 2

सर्वोच्च संकल्प स्क्रीन 2800x2100 के एक संकल्प के साथ a non-production NEC LCD screen है। यहां तक ​​कि उस आकार में, एक पिक्सेल स्क्रीन की चौड़ाई का 0.0357% है। तो 33.33% 5,000-पिक्सेल-चौड़े स्क्रीन मानक बनने तक पर्याप्त निकट होना चाहिए।

विभिन्न ब्राउज़रों, हालांकि में सब-पिक्सेल पूर्णांकन में John Resig did some research, तो अपनी तीन स्तंभों के आधार पर बराबर करने के लिए बिल्कुल स्क्रीन की चौड़ाई एक सटीक समाधान की आवश्यकता नहीं है हो सकता है।

Answer 3

अब जब कि calc आधुनिक ब्राउज़रों के बीच widely supported है, तो आप उपयोग कर सकते हैं:

#myDiv { 
    width: calc(100% /3); 
} 

या आप एक fallback के रूप में उपयोग कर सकते हैं यदि आपके ब्राउज़र इसका समर्थन नहीं करेंगे:

#myDivWithFallback { 
    width: 33.33%; 
    width: calc(100%/3); 
} 

Answer 4

.col_1_3 { 
    width: 33%; 
    float: left; 
} 

.col_1_3:nth-of-type(even) { 
    width: 34%; 
}