बच्चे दो div स्थापित करने के लिए कैसे 50%, माता पिता div

Question

मैं पैटर्न की तरह निम्नलिखित है के साथ 50%। कैसे माता पिता div

से 50% करने के लिए पहली और दूसरी childDiv वर्ग के लिए एक सीएसएस परिवर्तनों को लागू करने के लिए कैसे मैं बच्चे div करने के लिए 50%, 50% सेट करूँ?

<div class="parentDiv"> 
    <div class="childDiv"> // 50% width 
    </div> 
    <div class="childDiv"> // 50% width 
    </div> 
</div> 

Answer 1

.childDiv{ 
    display:inline-block; 
    width:50%; 
} 

Example

महत्वपूर्ण नोट:

1. divs
2. साथ ही आप display:inline-block;
3. के बजाय तैरता उपयोग कर सकते हैं के बीच व्हाइटस्पेस मत छोड़ो तत्वों उदाहरण में संरेखित नहीं करते हैं, तो आप ब्राउज़र box-sizing का समर्थन नहीं करता, बस उसके बाद सीमा को छोड़ देते हैं (यह चित्रण प्रयोजनों के लिए ही था)। पहले कुछ करने के लिए

Answer 2

सेट माता पिता चौड़ाई।

.parentDiv 
{ 
width: //insert width of the parentDIV 
} 

और उसके बाद बच्चे की चौड़ाई निर्धारित करें।

Answer 3

एक चाल यहाँ हैं, जिनमें से आप पता होना चाहिए का एक सा नहीं है। यदि आप पहले div के समापन और दूसरे के उद्घाटन के बीच कोई सफेद स्थान डालते हैं, तो ब्राउज़र में प्रदर्शित होने वाली जगह के कारण आपका 50% काम नहीं करेगा।

के कुछ तरीके हैं यह करने के लिए कर रहे हैं। आप केवल आधुनिक ब्राउज़रों (IE9 +, एफएफ, क्रोम, सफारी) लक्ष्यीकरण रहे हैं, तो आप inline-block उपयोग कर सकते हैं:

<style> 
    .childDiv { 
     display: inline-block; 
     width: 50%; 
    } 
</style> 

<div class="parentDiv"> 
    <div class="childDiv"> // 50% width 
    </div><div class="childDiv"> // 50% width 
    </div> 
</div> 

हालांकि, IE7 inline-block का समर्थन नहीं करता है, तो आप "पुराने स्कूल" विधि पर जा सकते हैं , तैरता का उपयोग कर:

<style> 
    .childDiv { 
     float: left; 
     width: 50%; 
    } 
</style> 

<div class="parentDiv"> 
    <div class="childDiv"> // 50% width 
    </div><div class="childDiv"> // 50% width 
    </div> 
    <div style="clear: both"></div> 
</div> 

आप दोनों स्तंभ सुनिश्चित करना चाहते हैं ठीक उसी चौड़ाई हैं और अभी भी उन दोनों के बीच एक छोटे से अंतराल है, तैरता की विभिन्न शैलियों का उपयोग करें। ध्यान दें कि इस विधि की आवश्यकता नहीं है कि आप divs के बीच अपने मार्कअप में खाली स्थान के खत्म करने, जब तक कि आप का उपयोग चौड़ाई कम से कम 50% है:

<style> 
    .childDiv { 
     width: 49.5%; 
    } 
    .left { float: left; } 
    .right{ float: right; } 
</style> 

<div class="parentDiv"> 
    <div class="childDiv left"> // 49.5% width 
    </div> 
    <div class="childDiv right"> // 49.5% width 
    </div> 
    <div style="clear: both"></div> 
</div>