अभिभावक div की चौड़ाई को भरने के लिए बच्चे divs को विस्तारित करें

Question

तो मेरे पास एक div के अंदर तीन divs हैं।

<div class="parent"> 
<div class="child> Text</div> 
<div class="child">Text</div> 
<div class="child">Text</div> 
</div> 

मैं चाहता हूं कि बच्चे माता-पिता की चौड़ाई को भरने के लिए div (बच्चों की संयुक्त चौड़ाई माता-पिता होना चाहिए)। हालांकि, यह नहीं हो रहा है, मैं कम गिर रहा हूँ। मुझे लगता है कि ऐसा इसलिए है क्योंकि बच्चे divs उनकी सामग्री के आधार पर चौड़ाई निर्धारित कर रहे हैं।

मैं जो चाहता हूं उसे कैसे प्राप्त करूं?

CSS-

.child { 
    background: white; 
    color: #a7a9ac; 
    cursor: pointer; 
    font-size: 15px; 
    border-right: 1px; 
    border-top: 0; 
    border-bottom: 0; 
    border-left: 0; 
    border-style: solid; 
    border-color: @faded-grey; 
    padding-right: 10px; 
    margin: 0 auto; 
    height: 100%; 
} 

.parent { 
    border-top: 1px; 
    border-left: 0; 
    border-bottom: 1; 
    border-style: solid; 
    border-color: @faded-grey; 
    border-right: 0; 
    width: 100%; 
    margin-right: 0px; 
    height: 80px; 

} 

Answer 1

तुम्हें पता है वहाँ हमेशा तीन बच्चों होगा, तो आप बस का उपयोग कर सकते हैं:

.parent > .child { 
    float: left; 
    width: 33%; 
} 

.parent { 
    overflow: auto; /*or whatever float wrapping technique you want to use*/ 
} 

यदि आप देखते हैं कि कितने बच्चों को पता नहीं है, आप की आवश्यकता होगी सीएसएस टेबल, फ्लेक्सबॉक्स का उपयोग करें, या शायद टेक्स्ट-एलाइन के साथ इनलाइन-ब्लॉकों को गठबंधन करें: उचित ठहराना।

Answer 2

आप .child सीएसएस नियम के इन तीन गुणों को जोड़ सकते हैं:

width:33%; 
float:left;  
box-sizing: border-box; 

अंतिम पंक्ति यह भी जब आप बक्से के लिए सीमाओं, गद्दी और मार्जिन जोड़ने के लिए काम करेंगे यकीन है कि बनाता है।

ONLINE DEMO

पी.एस.: सीधे संबंधित नहीं है, लेकिन वहाँ भी माता-पिता के लिए सीमा-नीचे, ऊपर बेला में सुधार में कोई त्रुटि है। आप गैर 0 मान का उपयोग जब आप इकाई निर्दिष्ट करने की आवश्यकता:

border-bottom:1px; 

Answer 3

मैं उन्हें पूरी तरह से प्रतिक्रिया देने के लिए के लिए तत्वों की संख्या में एक विचरण को समायोजित करने के लिए अपने समाधान के लिए की जरूरत है।

मुझे इस के लिए एक दिलचस्प समाधान मिला। यह अनिवार्य रूप से एक टेबल की तरह प्रदर्शित करता है। प्रत्येक तत्व शेयरों उपलब्ध चौड़ाई, और यह भी छवियों के लिए काम करता है बहुत अच्छी तरह से: http://jsfiddle.net/8Qa72/6/

.table { 
    display: table; 
    width: 400px; 
} 

.table .row { 
    display: table-row; 
} 

.table .row .cell { 
    display: table-cell; 
    padding: 5px; 
} 

.table .row .cell .contents { 
    background: #444; 
    width: 100%; 
    height: 75px; 
}