सीएसएस: बच्चों को माता-पिता की चौड़ाई फिट करने के लिए कैसे करें

Question

मैं div बच्चों के तत्वों के साथ मूल तत्व बना देता हूं जो कि मैं data-value विशेषता के आधार पर जावास्क्रिप्ट में चौड़ाई की गणना करता हूं।

यदि मैं सभी बच्चों के लिए गणना की चौड़ाई को जोड़ता हूं तो मैं 100% के साथ समाप्त हो जाऊंगा। लेकिन किसी कारण से बच्चे वास्तव में 100% माता-पिता की चौड़ाई पर कब्जा नहीं करेंगे: सफेद पिक्सल का एक हिस्सा अंतिम बच्चे के ठीक बाद दिखाई देता है। http://jsfiddle.net/tqVUy/42/

Chrome और Firefox यह ठीक से प्रस्तुत करना, मैं सफारी और ओपेरा में इस समस्या का सामना करना पड़ता है (कृपया नीचे छवि देखें):

यह एक फिडल कि इस दर्शाता है।

कि इसके अलावा, overflow संपत्ति अपेक्षा के अनुरूप काम नहीं करता है, के रूप में बच्चों तत्वों माता पिता div (फिर से, केवल सफारी और ओपेरा में प्रासंगिक) ओवरलैप।

सवाल:

1. वहाँ अन्य (दाएं) जिस तरह से बच्चों फिट माता पिता बनाने के लिए है?
2. अभिभावक के लिए गोलाकार कोनों और overflow: hidden, क्या मैं इसे सभी ब्राउज़रों में देख सकता हूं?

Answer 1

जोड़ा गया सीएसएस: js में

#component>div{height:100%;} 
#component>div:first-of-type{border-radius:30px 0 0 30px;} 
#component>div:last-of-type{border-radius: 30px;} 

संपादित करें:

$('#component').children().not(':last').each(function() { 

क्या होता है:
पिछले div नाव नहीं होगा बाएं, और बस छोड़ी गई जगह भर जाएगी। मैंने कोने मुद्दे को ठीक करने के लिए पहले और अंतिम div में गोलाकार कोनों को जोड़ा। पिछले div, हर कोने में एक 30px त्रिज्या है क्योंकि div अन्य divs के पीछे वास्तव में है (जैसा कि आप देख सकते हैं इस तत्व का निरीक्षण के साथ)

डेमो:
http://jsfiddle.net/tqVUy/48/

Answer 2

मुझे भी उस प्रकार की समस्या का सामना करना पड़ता है। यही कारण है कि बच्चे को सीमा-त्रिज्या परिभाषित करें। इस तरह लिखें:

#component > div:first-child{ 
    border-radius:30px 0 0 30px; 
} 
#component > div:last-child{ 
    border-radius:0 30px 30px 0; 
} 

चेक इस http://jsfiddle.net/tqVUy/49/