CSS Float dehnt sich nicht Div Höhe

Ich habe dieses Problem seit langem bei der Arbeit mit HTML/CSS und Floats.CSS Float dehnt sich nicht Div Höhe

In dem Bild können Sie sehen, ich habe eine Box Div, die links schwebt, da es viele dieser Boxen gibt. In der Box habe ich eine <UL> Liste. Die Listeneinträge <li> sind ebenfalls Floated links.

Wie Sie auf dem Bild sehen können, machen die Listenelemente nicht die Box Div, die sie in Expand sind. Ich habe mehrere Dinge ohne viel Glück ausprobiert und hoffte, dass jemand mit mehr Erfahrung helfen könnte? Ich kann keine feste Höhe für die Box Div festlegen, da die Anzahl der Symbole immer unterschiedlich ist und sie erweitert werden muss, um sie zu beheben.

enter image description here

Live-Demo: 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>

CSS

/* 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; 
}

Quelle

2013-02-27 JasonDavis

Sie benötigen Schwimmer Element mit einem clearfix oder Löschen zu löschen.

Methode 1 clearfix

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

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    *zoom: 1; 
}

Dann fügen Sie die Klasse auf dem Behälterelement

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

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

Methode # 2 Räumelement

.clear { 
    clear: both; 
}

Dann fügen Sie den folgenden HTML-Code nach Ihren Floated-Elementen hinzu.

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

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

Quelle

2013-02-27 21:41:48 Jrod

** Hinweis: ** Methode # 2 ist mehr Browser-kompatibel (ältere Versionen), aber auch weniger wünschenswert, da HTML hinzugefügt wird, die keinerlei semantischen Nutzen hat. – animuson

Methode # 1 bekannte Unterstützung: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ http://nicolasgallagher.com/micro-clearfix-hack/ – Jrod

Versuchen overflow:auto an dem Behälter Anwendung der eine, deren Höhe Sie auf der Höhe seines Inhalts basierend auf Größe verändert werden soll (die schwammen Artikel).

Ich würde einen jsfiddle Link hinzufügen, aber es funktioniert nicht überhaupt für mich vor kurzem. :/

Quelle

2013-02-27 21:41:58 Madbreaks

Sie können den overflow: hidden Trick auf den übergeordneten Container (..Module-Box-Körper);) alles behebt.

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

Quelle

2013-02-27 21:42:35 Terry

Danke - warum funktioniert das? –

@wrongstars Es ist schwierig, es in Laien zu erklären, aber im Grunde verwendet 'overflow: hidden' einen neuen Blockflusskontext, der den übergeordneten Container dazu zwingt, das innere schwebende Element vollständig zu" erkennen "und zu maskieren. http://stackoverflow.com/questions/3400749/how-does-css-overflowhidden-work-to-force-an-element-containing-floated-elem – Terry

@Terry, Alter, das ist genau das, was ich gesucht habe, es ist lächerlich, wie einfach diese Antwort ist, um das Problem zu lösen. Bist du ein Magier? – Dan

ändern .module-box-body li zu

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

fiddle aktualisiert.

Quelle

2013-02-27 21:44:05 hjpotter92

Antwort

Verwandte Themen