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

Question

मेरे पास एक सर्वर-साइड घटक है जो बिना किसी चौड़ाई के DIV का उपयोग करके तरल लेआउट "टूलबार" उत्पन्न करता है, जिसमें इसके अंदर कई A उत्पन्न होते हैं।

फिर मुझे उस लेआउट को कस्टमाइज़ करने की आवश्यकता है ताकि सभी A टैग पैरेंट चौड़ाई के लिए ऑटो फिट हो सकें। लेकिन बच्चों की संख्या परिवर्तनीय है और माता-पिता की चौड़ाई ज्ञात नहीं है (यह स्वतः खिड़की पर फिट बैठती है)।

मैं इस फिडल साथ कुछ परीक्षण किया: http://jsfiddle.net/ErickPetru/6nSEj/1/

लेकिन मैं इसे गतिशील (uncomment पिछले A टैग को देखने के लिए कि यह कैसे काम कर रहे, lol ins't) बनाने के लिए एक तरह से नहीं मिल रहा।

मैं निश्चित चौड़ाई के साथ सर्वर-साइड स्रोतों को ग्रेनेट HTML में नहीं बदल सकता। और अगर मैं कोई तरीका है, तो मैं वास्तव में केवल सीएसएस के साथ इसे हल करना चाहता हूं, यहां तक ​​कि जावास्क्रिप्ट के साथ मैं उस परिणाम को प्राप्त कर सकता हूं।

मैं सभी बच्चों को स्वतंत्र रूप से बच्चों की संख्या से माता-पिता की चौड़ाई में स्वतः फिट कैसे कर सकता हूं?

Answer 1

यह पहले से ही एक बहुत पुराना सवाल है। यद्यपि दिए गए उत्तरों ने उस समय अच्छी तरह से भाग लिया, आजकल Flexible Box Layout सभी आधुनिक ब्राउज़रों में good support के साथ, अधिक सादगी के साथ एक ही परिणाम प्रदान करता है। मैं दृढ़ता से इसकी अनुशंसा करता हूं!

/* Important parts */ 
 
.parent { 
 
    display: flex; 
 
} 
 

 
.parent a { 
 
    flex: 1; 
 
} 
 

 
/* Decoration */ 
 
.parent { 
 
    padding: 8px; 
 
    border: 1px solid #ccc; 
 
    background: #ededed; 
 
} 
 

 
.parent a { 
 
    line-height: 26px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    border: 1px solid #ccc; 
 
    background: #dbdbdb; 
 
    color: #111; 
 
}

<div class="parent"> 
 
    <a href="#">Some</a> 
 
    <a href="#">Other</a> 
 
    <a href="#">Any</a> 
 
</div> 
 

 
<br> 
 

 
<div class="parent"> 
 
    <a href="#">Some</a> 
 
    <a href="#">Other</a> 
 
    <a href="#">Any</a> 
 
    <a href="#">One More</a> 
 
    <a href="#">Last</a> 
 
</div>

Answer 2

अब कई लोग इस समस्या के समाधान के रूप में jQuery का उपयोग करते हैं। आपको बस एक पंक्ति चाहिए। यह आपके बेवकूफ से है।

$("div.parent a").css("width", (($("div.parent").width()/$("div.parent a").length) -2) + "px"); 

Answer 3

आप display: table-cell उपयोग कर सकते हैं:

देखें:http://jsfiddle.net/6nSEj/12/(or with 5 children)

यह IE7 में काम नहीं करेगा क्योंकि कि ब्राउज़र बस display: table और दोस्तों का समर्थन नहीं करता।

div.parent { 
    .. 
    width: 100%; 
    display: table; 
    table-layout: fixed; 
} 
div.parent a { 
    .. 
    display: table-cell; 
}