सीएसएस फ्लोट div ऊंचाई को बढ़ाता नहीं है

मुझे HTML/CSS और Floats के साथ काम करते समय लंबे समय तक यह समस्या आई है।सीएसएस फ्लोट div ऊंचाई को बढ़ाता नहीं है

छवि में आप देख सकते हैं कि मेरे पास एक बॉक्स डिव है जो बाएं फ़्लोट किया गया है क्योंकि इनमें से कई बॉक्स हैं। बॉक्स के अंदर मेरे पास <UL> सूची है। सूची आइटम <li> भी फ़्लोट किया गया है।

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

enter image description here

लाइव डेमो: http://jsfiddle.net/jasondavis/u5HXu/

<div class="module-box"> 
    <div class="module-box-title"> 
     <h4><i class="icon-cogs"></i>Admin Settings</h4> 
     <div class="tools"> 
      <a href="#" class="collapse">-</a> 
     </div> 
    </div> 
    <div class="module-box-body" style="display: block;"> 


     <ul> 
      <li> 
       <a href="#"> 
        <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0"> 
        <span class="module-icon password_assistant"></span> 
       </a><br> 
       <a href="#">Change<br>Password</a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0"> 
        <span class="module-icon password_assistant"></span> 
       </a><br> 
       <a href="#">Change<br>Password</a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://cp.codedevelopr.com/modules/password_assistant/assets/icon.png" border="0"> 
        <span class="module-icon password_assistant"></span> 
       </a><br> 
       <a href="#">Change<br>Password</a> 
      </li> 
     </ul> 


    </div> 
</div>

सीएसएस

/* Modules homepage */ 
.module-box { 
    margin: 0px 0px 25px 25px; 
    padding: 0px; 
    float: left; 
    width: 464px; 
} 

.module-box-title { 
    margin-bottom: 0px; 
    padding: 8px 10px 2px 10px; 
    border-bottom: 1px solid #eee; 
    color: #fff !important; 
    background-color: #333; 
    height: 51px; 
    line-height: 45px; 
    border-radius: 3px 3px 0 0; 
} 

.module-box-title h4 { 
    display: inline-block; 
    font-size: 18px; 
    font-weight: 400; 
    margin: 0; 
    padding: 0; 
    margin-bottom: 7px; 
} 

.module-box-title .tools { 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
    margin-top: 6px; 
    float: right; 
} 
.module-box-title .tools a { 
    font-size: 31px; 
    color: #fff; 
    text-decoration: none; 
    line-height: 29px; 
} 

.module-box-body { 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-top: 0; 
    padding: 10px; 
    clear: both; 
} 

.module-box-body a { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 11px; 
    color: #888; 
    text-decoration: none; 
} 

.module-box-body li { 
    float: left; 
    margin: 0 12px 0 0; 
    list-style: none; 
}

स्रोत

2013-02-27 JasonDavis

आप एक clearfix का उपयोग कर या तत्व साफ़ करने से आपकी तैरता स्पष्ट करने की जरूरत है।

विधि # 1 clearfix

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    *zoom: 1; 
}

तो फिर तुम युक्त तत्व

<div class="module-box-body clearfix" style="display: block;">

http://jsfiddle.net/u5HXu/8/

विधि # 2 क्लियरिंग तत्व

पर वर्ग को जोड़ने

.clear { 
    clear: both; 
}

फिर आप अपने फ़्लोट किए गए तत्वों के बाद निम्न HTML जोड़ते हैं।

<div class="clear"></div>

http://jsfiddle.net/u5HXu/9/

स्रोत

2013-02-27 21:41:48 Jrod

** नोट: ** विधि # 2 अधिक क्रॉस-ब्राउज़र संगत (पुराने संस्करण) है, लेकिन यह भी कम वांछनीय है क्योंकि यह HTML जोड़ता है जिसमें कोई भी अर्थपूर्ण उपयोग नहीं है। – animuson

विधि # 1 ज्ञात समर्थन: फ़ायरफ़ॉक्स 3।5+, सफारी 4+, क्रोम, ओपेरा 9 +, आईई 6+ http://nicolasgallagher.com/micro-clearfix-hack/ – Jrod

कंटेनर, जिसका ऊंचाई आप इसकी सामग्री (जारी आइटम) की ऊंचाई के आधार पर आकार बदलने के लिए चाहते हैं overflow:auto लागू करने की कोशिश करो।

मैं एक jsfiddle लिंक जोड़ूंगा लेकिन यह मेरे लिए हाल ही में पर काम नहीं कर रहा है। :/

स्रोत

2013-02-27 21:41:58 Madbreaks

आप पैरेंट कंटेनर (.. मॉड्यूल-बॉक्स-बॉडी) पर overflow: hidden चाल का उपयोग कर सकते हैं;) सबकुछ ठीक करता है।

http://jsfiddle.net/teddyrised/ct6gr/

स्रोत

2013-02-27 21:42:35 Terry

धन्यवाद - यह क्यों काम करता है ?? –

@wrongstars इसे आम आदमी के शब्दों में समझाना मुश्किल है, लेकिन मूल रूप से 'ओवरफ्लो: छुपा' का उपयोग करके एक नया ब्लॉक प्रवाह संदर्भ स्थापित करता है, जो माता-पिता के कंटेनर को "पहचानने" और आंतरिक फ्लोट तत्व को पूरी तरह से अनुक्रमित करने के लिए मजबूर करता है। http://stackoverflow.com/questions/3400749/how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem – Terry

@ टेरी, दोस्त, यह वही है जो मैं ढूंढ रहा था, यह हास्यास्पद है कि इस मुद्दे को हल करने के लिए यह जवाब कितना आसान है। क्या आप एक जादूगर हैं? – Dan

बदलें

अपने .module-box-body li

को

.module-box-body li { 
    display: inline-block; 
    margin: 0 12px 0; 
    list-style: none; 
}

अपडेट किया गया fiddle।

स्रोत

2013-02-27 21:44:05 hjpotter92

सीएसएस फ्लोट div ऊंचाई को बढ़ाता नहीं है

उत्तर

संबंधित मुद्दे