सीएसएस कंटेनर डीवी ऊंचाई। DIV सवाल

Question

आप दो div बच्चों जारी समायोजित करने के लिए एक कंटेनर DIV ऊंचाई मजबूर कर सकते हैं फ्लोटिंग? क्या ऐसा करने के लिए मैं एक फैंसी चाल का उपयोग कर सकता हूं? मैं पैरेंट div के अंदर दो समान आकार के divs बनाने की कोशिश कर रहा हूँ। मैं उन्हें उनके बीच एक छोटी सी जगह के साथ पक्ष में दिखना चाहता हूं। चाइल्ड 2 बाहर निकलता है और चाइल्ड 1 से नीचे जाता है। नोट Child2 में एक टेबल है। क्या मुझे तैरना चाहिए?

HTML:

<div id="parent"> 
    <div id="child1"></div> 
    <div id="child2"> 
    <table><tr><td>content</td></tr></table> 
</div> 
</div> 

सीएसएस:

div#parent 
{ 
    background-color: #C6E4E0; 
    border: solid 3px #017E6F; 
    font-family: Arial; 
    font-size: 10pt; 
    font-weight: bold; 
    padding-left: 5px; 
    padding-right: 5px; 
    width:99%; 
} 

div#parent div 
{ 
    width:49%; 
    float:right; 
    padding:3px; 
} 

div#parent div:first-child 
{ 
    float:left; 
} 

Answer 1

#container { width:200px; } 
.floated { width:100px; float:left; } 
.clear  { clear:both; } 

<div id="container"> 
    <div class="floated">A</div> 
    <div class="floated">B</div> 
    <div class="clear"></div> 
</div> 

Answer 2

मैं clear: both; के एक प्रशंसक, मैं नहीं बल्कि इस जोनाथन Sampsons उदाहरण में क्या नहीं कर रहा हूँ:

#container { width:200px; overflow: hidden; } 
.floated { width:100px; float:left; } 

 

<div id="container"> 
    <div class="floated">A</div> 
    <div class="floated">B</div> 
</div> 

Answer 3

वैसे, आप

div#parent > div { float:left; }

बजाय

div#parent div:first-child { float:left; }

है जो अभी भी अनुकूल IE6 नहीं चाहते हैं, लेकिन यह दोनों बच्चे DIVs तैर सकती है।

Answer 4

मैं clearfix वर्ग का उपयोग करें।

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.clearfix { 
    display: inline-block; 
} 

/* Hides from IE-mac \*/ 
/** html .clearfix {height: 1%;}*/ 

.clearfix { 
    display: block; 
} 

/* End hide from IE-mac */ 

तो बस प्रत्येक फ़्लोट-तत्व कंटेनर में कक्षा का उपयोग करें।

Answer 5

यह एक clearfix मुद्दा लोग नहीं है, उसकी समस्या यह है कि उनके दो शुरु divs कंधे से कंधा मिलाकर दिखाई नहीं दे रहे है।

सबसे पहले, आप माता-पिता div की चौड़ाई निर्धारित करने की आवश्यकता नहीं है, divs जिसका मतलब है कि वे अपने आप अपने माता पिता की पूरी चौड़ाई (संभवतः की मूल लेने के लिए इस मामले में उनकी चौड़ाई समायोजित ब्लॉक तत्व हैं div # माता-पिता शरीर है)।

क्योंकि आप चौड़ाई स्पष्ट रूप से सेट करके उसे गद्दी दे रहे हैं, यह संभावित रूप से शरीर से बाहर भी कर सकते हैं। यह वास्तव में कोई फर्क नहीं पड़ता, लेकिन यदि आप इस ज्ञान को बच्चे को ले जाने वाले divs पर लागू करते हैं और आप देख सकते हैं कि सही व्यक्ति नीचे क्यों उतर सकता है।

पहला, अगर आप स्पष्ट रूप से एक प्रतिशत के लिए divs की चौड़ाई सेट कर रहे हैं, तो आप गद्दी जोड़ने की जरूरत नहीं है। क्योंकि आप प्रतिशत चौड़ाई के साथ काम कर रहे हैं, यह बेहतर divs बजाय divs खुद की सामग्री के लिए गद्दी को जोड़ने के लिए है, क्योंकि गद्दी चौड़ाई में जोड़ा जाता है है। इसलिए, यदि आपने एक div में 10px पैडिंग जोड़ा है जिसमें 100px माता-पिता में 49% चौड़ाई थी, तो इसकी कुल गणना चौड़ाई के लिए 49px + 10px + 10px (2 पक्ष) की चौड़ाई होगी।

चूंकि आपने अपना मार्कअप और सामग्री पोस्ट नहीं की है या आप जिस ब्राउज़र में परीक्षण कर रहे हैं, मैं बिल्कुल नहीं कह सकता कि क्यों div को टक्कर दी जा रही है। दो संभावित संभावनाएं हैं।

1. आप आईई का उपयोग कर रहे हैं, जो तालिकाओं को अपने मूल div से आगे बढ़ाने की अनुमति देता है जो टूटने का कारण बनता है। टेबल चौड़ाई को अपने माता-पिता के प्रतिशत या उस तरह से कुछ स्पष्ट रूप से सेट करने का प्रयास करें।
2. 49% चौड़ाई + पैडिंग = [पैरेंट-चौड़ाई] से अधिक - [बाएं-div-width]। इससे इसे नीचे गिरने का कारण बन जाएगा क्योंकि बाएं div और दाएं div पैरेंट चौड़ाई के लिए बहुत व्यापक हैं।