अपने फ्लोट किए गए बच्चों के चारों ओर लपेटने के लिए div की ऊंचाई को फिट करने के लिए कैसे करें

Question

मेरे पास दो बच्चों के चारों ओर एक div, एक फ्लोट बाएं और दूसरा दायां लपेटा गया है। मैं बच्चों के चारों ओर एक सीमा और पृष्ठभूमि रखना चाहता हूं, लेकिन div की ऊंचाई 0 है क्योंकि यह बच्चों को फिट करने के लिए आकार बदलती नहीं है।

यहाँ कार्रवाई में इसके बारे में एक उदाहरण है: http://jsfiddle.net/VVZ7j/17/

मैं लाल रंग की पृष्ठभूमि सभी तरह नीचे जाना चाहता हूँ। मैंने ऊंचाई की कोशिश की है: ऑटो, लेकिन यह काम नहीं किया।

किसी भी और सभी सहायता की सराहना की जाएगी, धन्यवाद।

पीएस यदि संभव हो तो मैं किसी भी जावास्क्रिप्ट का उपयोग नहीं करना चाहता हूं।

Answer 1

फ्लोट्स के साथ काम करते समय यह एक आम समस्या है। कई सामान्य समाधान हैं, जिन्हें मैंने व्यक्तिगत वरीयता (सर्वोत्तम दृष्टिकोण) द्वारा आदेश दिया है:

1. :: सीएसएस छद्म तत्व के बाद :: का उपयोग करें। इसे 'clearfix' के रूप में जाना जाता है, और IE8 और ऊपर काम करता है। यदि आपको आईई के पिछले संस्करणों, this answer should help के साथ संगतता की आवश्यकता है। Example।

   .parentelement::after { 
       content: ""; 
       display: table; 
       clear: both; 
   } 
   

2. सीएसएस विशेषता overflow: auto या overflow: hidden साथ एक कंटेनर में दो तैरता जोड़ें। हालांकि, यह दृष्टिकोण समस्याएं पैदा कर सकता है (उदाहरण के लिए जब एक टूलटिप मूल तत्व के किनारों को ओवरलैप करता है तो एक स्क्रॉलबार दिखाई देगा)। Example।

   <div style="overflow: auto"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

3. पैरेंट तत्व में एक सेट ऊंचाई जोड़ें। Example।

   <div style="height: 200px"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

4. मूल तत्व को एक फ्लोट बनाएं। Example।

   <div style="float: left"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

5. clear: both साथ तैरता के बाद एक div जोड़ें। Example।

   <div style="float: left"></div> 
   <div style="float: left"></div> 
   <div style="clear: both"></div> 
   

Answer 2

overflow: hidden; #wrap में जोड़ें। यह clear fix है। http://positioniseverything.net/easyclearing.html

ले:: यहाँ इस बारे में कुछ प्रलेखन है वहाँ भी कई तरीके आप इस लक्ष्य को हासिल कर सकते हैं, ब्राउज़र compatibilty के आधार पर:

1. अतिप्रवाह जोड़ें: पैरेंट कंटेनर के लिए छिपा हुआ है।

#wrap { overflow: hidden; }

1. clear: both जोड़ने के लिए एक छद्म तत्व का प्रयोग करें।

#wrap:after { clear: both; content: ""; display: table;}

1. सबसे अधिक इस्तेमाल किया tehnique पैरेंट कंटेनर के अंतिम तत्व के रूप में एक अतिरिक्त जोड़ना है।

<div style="clear:both"></div>

मैं not preffer के रूप में आप अतिरिक्त HTML मार्कअप मिल 3 एक का उपयोग करने के लिए।

Answer 3

overflow: hidden को अपने #wrapdiv पर जोड़ने का प्रयास करें।

Answer 4

बस शैली स्पष्ट साथ एक और div जोड़ें: एक बाहरी div यहाँ यानी बंद करने से पहले दोनों "रैप"

--Sample code--

<div id="wrap"> 
    <div id="left"> 
     <p>some content at left</p> 
    </div> 
    <div id="right"> 
     <p>some content at right</p> 
    </div> 
    <div style="clear:both"></div> 
</div> 

Answer 5

मैं निकोलस गैलाघर से इस "माइक्रो-क्लीयरफिक्स" समाधान का उपयोग शुरू करने आया हूं।

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */ 
.cf:before, 
.cf:after { 
    content:""; 
    display:table; 
} 

.cf:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.cf { 
    *zoom:1; 
} 

बस अपने सीएसएस और किसी भी शुरु तत्व है कि जोड़ने के किसी भी किसी भी तत्व है कि बच्चों को जारी किया गया है के आवरण के लिए "cf" वर्ग जोड़ें।