CSS Float funktioniert nicht-stretch-Div-Höhe

Ich habe dieses problem für eine lange Zeit, wenn die Arbeit mit HTML/CSS und Floats.

In das Bild, das Sie sehen können, habe ich eine Div-Box, die ist Geschwommen wie Links es gibt viele von diesen Boxen. In der Box habe ich eine <UL> Liste. Die Elemente der Liste <li> sind auch Schwebte überlassen.

Als Sie es im Bild sehen kann, die Liste der Elemente, nicht die Div-Box, dass Sie in der Erweitern. Ich habe versucht, mehrere Sache ohne viel Glück und war in der Hoffnung, jemand mit mehr Erfahrung helfen könnte? Ich kann nicht eine Feste Höhe auf die Div-Box wie die Anzahl der Symbole ist immer anders und man muss es erweitern, um Sie zu beheben.

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

InformationsquelleAutor JasonDavis | 2013-02-27

12

Müssen Sie klar Ihr schwebt mit einem clearfix oder clearing element.

Methode #1 clearfix
```
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
```
Dann fügen Sie die Klasse, auf die enthaltenen element
```
 <div class="module-box-body clearfix" style="display: block;">
```
http://jsfiddle.net/u5HXu/8/

Methode #2 Clearing-Element
```
.clear {
    clear: both;
}
```
Dann fügen Sie den folgenden HTML-Code nach Ihren schwebte-Elemente.
```
<div class="clear"></div>
```
http://jsfiddle.net/u5HXu/9/
- Hinweis: Methode #2 ist mehr cross-browser-kompatibel (ältere Versionen), aber auch weniger wünschenswert, da es fügt HTML, das keine semantische Nützlichkeit überhaupt.
- Methode #1 bekannte support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ nicolasgallagher.com/micro-clearfix-hack
InformationsquelleAutor Jrod
7

Können Sie die overflow: hidden trick auf den übergeordneten container (..Modul-box-Körper) 😉 behebt alles.

http://jsfiddle.net/teddyrised/ct6gr/
- Danke - warum funktioniert das??
- Es ist schwer, es zu erklären, laienhaft ausgedrückt, aber im Grunde mit overflow: hidden wird eine neue block-flow-Rahmen, die Kräfte des übergeordneten Containers zu "erkennen" und zur Speicherung der inneren Schwebekörper ganz. stackoverflow.com/questions/3400749/...
- dude, das ist genau das, was ich suchte, es ist lächerlich, wie einfach diese Antwort ist, lösen Sie die Frage auf der hand. Sind Sie ein Zauberer ?
- css ist so ein Durcheinander.. aber danke! geholfen!
InformationsquelleAutor Terry

Ändern Sie Ihre .module-box-body li zu

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

Aktualisiert fiddle.

InformationsquelleAutor hjpotter92

1

Versuchen Sie die Anwendung overflow:auto auf den container, der eine, dessen Höhe Sie ändern möchten, basierend auf die Höhe des Inhalts (die gefloateten Elemente).

Ich würde hinzufügen ein jsfiddle link, aber es ist nicht gearbeitet an alle für mich vor kurzem. :/

InformationsquelleAutor Madbreaks

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.