CSS: DIV, Nein Höhe auf float gesetzt

angenommen, wir haben diesen code:

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'>
     <div id='rightDiv' style='float:right;width:75%;'>
       content1
     </div>  
     <div id='leftDiv' style='float:left;width:25%;'>
       content2
     </div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
   content3
</div>

Wenn der Inhalt der rightDiv und leftDiv übergibt die 200px Höhe (min-height) upperDiv nicht wachsen, so dass sein Inhalt überlappt das untere div.
Wenn ich Entferne das float-Attribut von den großen content wächst es und wird es sein problem.
Aber ich weiß nicht, was Div (rightDiv oder leftDiv) übergibt 200px Höhe.
Wie kann ich dieses Problem beheben?

Dank

InformationsquelleAutor der Frage RYN | 2010-10-24

  1. 40

    Set #upperDiv alle der folgenden:

    overflow: hidden;
width: 100%;

    oder 

    float: left;
width: 100%;

    oder eine Regel erstellen, mit CSS pseudo-Elementen (IE8+ kompatibel), wie dies

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

    Beste Lösung

    Erstellen Sie eine wiederverwendbare Klasse eine Regel wie die folgende.

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

    Nun können Sie es anwenden, um alles, muss diese Funktionalität. Zum Beispiel...

    <div id='upperDiv' class="group" ... >

    P. S. Wenn Sie benötigen, IE 6/7 Kompatibilität, Kasse dieser Beitrag.

    InformationsquelleAutor der Antwort jessegavin

  2. 6

    Dies ist beabsichtigt, denn die Schwimmer sind konzipiert für Dinge wie Bilder, die in den Absätzen (wo mehrere Absätze wickeln kann um das Bild).

    Komplexe Spirale hat eine ausführlichere Erklärungwarum und Ed-Elliot beschreibt eine Reihe von Ansätze zur Container erweitern Sie herum schwebt. Ich finde die overflow: hidden Ansatz am besten funktioniert in den meisten Situationen.

    InformationsquelleAutor der Antwort Quentin

  3. 5

    Nach

     <div id='leftDiv' style='float:left;width:25%;'>
   content2
 </div>

    hinzufügen 

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

    Es wird Ihr problem lösen.

    InformationsquelleAutor der Antwort PJunior

Schreibe einen Kommentar