अभिभावक दिव्य ऊंचाई शून्य क्यों है जब उसने बच्चों को मंगाई है

131

मैं अपने सीएसएस में निम्नलिखित है। सभी मार्जिन / पैडिंग / बॉर्डर विश्व स्तर पर 0 पर रीसेट हैं।

#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

अब जब मैं अपना HTML लिखता हूं

<div id="wrapper">
    <div class="content">
        some text here
    </div>
    <div class="lbar">
        some text here
    </div>
</div>

पृष्ठ सही तरीके से प्रस्तुत करता है। हालांकि, जब मैं तत्वों का निरीक्षण करता हूं, तो उच्च div#wrapperहोने के रूप में दिखाया गया है 0px। मुझे उम्मीद है कि इसका अंत तक विस्तार होगा div.contentऔर div.lbar... ऐसा क्यों होता है?

फिर से, पेज ठीक प्रदान करता है। यह व्यवहार मुझे हैरान कर देता है।

html css

— क्रिस स्ट्राइकसिनस्की
स्रोत

4

यह आपके लिए सीएसएस फ़्लोट 101 से ए लिस्ट के अलावा उपयोगी हो सकता है ।

— डेविड कहते हैं कि

250

सामग्री जो तैर रही है, उसके कंटेनर की ऊंचाई को प्रभावित नहीं करती है। तत्व में ऐसी कोई सामग्री नहीं है जो तैरती नहीं है (इसलिए कुछ भी कंटेनर की ऊंचाई को 0 नहीं रोकता है, जैसे कि वह खाली था)।

overflow: hiddenकंटेनर पर सेट करने से नए ब्लॉक स्वरूपण संदर्भ की स्थापना से बचना होगा । देखें तैरता युक्त करने के लिए तरीके अन्य तकनीकों के लिए और तैरता युक्त क्यों सीएसएस इस तरह से डिजाइन किया गया था के बारे में एक स्पष्टीकरण के लिए।

— क्वेंटिन
स्रोत

यहां कंटेनर बनाने के लिए एक और दृष्टिकोण है जिसमें पृष्ठ पर तत्वों को जोड़ने के बिना सीएसएस में हल किए गए फ़्लोट्स हैं।

— फिल

56

आमतौर पर, floatअपने माता-पिता के लेआउट में गिने नहीं जाते हैं।

इसे रोकने के overflow: hiddenलिए, माता-पिता में जोड़ें ।

— SLaks
स्रोत

16

धन्यवाद, यह काम करता है, लेकिन मुझे समझ में नहीं आता कि क्यों ... अतिप्रवाह: छिपी हुई सामग्री को छिपाने के लिए कहा जाता है , जो तत्व को बढ़ाने के लिए नहीं है।

— ripper234

@ ripper234 यहाँ है क्यों: stackoverflow.com/questions/25818199/…

— kristianp

6

मुझे यकीन नहीं है कि यह एक सही तरीका है लेकिन मैंने इसे display: inline-block;रैपर डि से जोड़कर हल किया है ।

#wrapper{
    display: inline-block;
    /*border: 1px black solid;*/
    width: 75%;
    min-width: 800px;
}

.content{
    text-align: justify; 
    float: right; 
    width: 90%;
}

.lbar{
    text-align: justify; 
    float: left; 
    width: 10%;
}

— Melih
स्रोत

1

यह सटीक समाधान था जिसकी मुझे तलाश थी। अतिप्रवाह: छिपा कारण बॉक्स छाया गायब होने के लिए, स्वाभाविक रूप से।

— कीतारा