CSS Eltern-Kind-Höhe

Question

ich habe ein Problem mit diesem Code-Schnipsel:

CSS:

#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>

Linke Höhe 80px und rechts in der Höhe ist 150px. Ich würde diese Sache mag, so erscheinen: http://img408.imageshack.us/img408/9978/dream.th. jpg Der obige Screenshot von IE, wenn ich IE verwenden diese Schnipsel perfekt funktionieren. Aber wenn ich anderen Browser (Opera, FF, Safari, Chrome), bekomme ich diese: http://img408.imageshack.us/img408/869/fact.th. jpg

Das ist nicht cool ... Ich möchte die Eltern (#wrapper) Element in der Höhe die größere Höhe der beiden Kinder zu bekommen.

Answer 1

Dies ist ein Fehler im Internet Explorer.

Schwimmer mit einem Gehalt erklärt, warum Sie dieses Verhalten sehen, während Methoden für Floats mit einem Gehalt als das Hinzufügen zusätzlichen Markup bessere Lösungen gibt

Answer 2

CSS

#wrapper:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;}

Answer 3

Danke für die schnelle Antwort David. Ich habe nicht alle Inhalte, die Sie (zwei Links) geschrieben, aber ich stieß auf eine Lösung auf dem zweiten Link. Ich habe einen extra div mit put "clear: both;" in den Behälter, und es funktioniert! Vielen Dank. Matt Ball: Danke, aber ich würde diese Sache gerne dynamisch wachsen

Answer 4

Wenn zwei div (e) Schwimmer in einem Behälter, der keine feste Höhe (oder seine Höhe ist

, um den Behälter zu zwingen, die zwei div zu enthalten, müssen Sie sowohl den Schwimmer (en) löschen, bevor Sie den Behälter zu schließen! Mit anderen Worten ....

CSS

<style>
#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

.clearer{ clear: both;}
</style>

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div class="clearer"></div>
</div>

Answer 5

Sie einfach die Überlaufstil der Eltern auf etwas anderes als sichtbar und es wird um das Kind Inhalt wickeln.

Answer 6

Die beste Lösung, die ich gefunden habe, ist ähnlich wie Rodrigos oben, aber ohne die Notwendigkeit, dass die Leerzeichen in dem Inhalt (und daher keine Notwendigkeit, die Schriftgröße angeben, entweder). Wenn Sie es sich um eine Klasse zu machen können Sie es auf jeden Container Block anwenden, nicht nur Ihre Wrapper. (Ich glaube, es ist auch am besten nicht eine ID, um Stil, aber das ist eine andere Frage.)

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
*:first-child+html .clearfix { /* Optional fix for IE7 */
    zoom: 1; 
}