Wie man ein inneres div macht drück das äußere div down

Question

Angenommen, ich habe ein Div. In diesem Div habe ich zwei Divs, die links und rechts neben einander schweben, glaube ich. Das linke div ist für ein Bild. Aus irgendeinem Grund, wenn das Bild zu groß ist, wird das äußere Teil nicht an das Bild angepasst. Stattdessen läuft das Bild einfach weiter und geht "über" die untere Grenze des äußeren Teils hinaus. Wie kann ich es so machen, dass das Bild auch das äußere div erweitert?

<div> 
    <div class="left"> 
    </div> 

    <div class="right"> 
    </div> 
</div> 

Answer 1

das Hinzufügen entweder "overflow: auto;" oder "overflow: hidden;" zu dem enthaltenden Div sind beide gute Lösungen (jede mit ihren eigenen Macken, abhängig vom genauen Szenario, aber sehr zuverlässig). Sie müssen hasLayout hinzufügen, damit dies in IE funktioniert. Einfachste ist hinzuzufügen:

.container { 
    overflow: hidden; 
    display: inline-block; /* triggers hasLayout in IE */ 
} 

.container { 
    display: block; /* back to block */ 
} 

Weitere Möglichkeiten: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Answer 2

<div style="overflow: auto"> 
    <div class="left"> 
    </div> 

    <div class="right"> 
    </div> 
</div> 

Answer 3

Wenn Sie ein div mit zwei Elementen haben, die größte, die die äußere div drückt nicht schwimmt. Wenn Sie ein div mit zwei floated Elementen haben, brauchen Sie ein div mit einem clear: beides um alles runter zu schieben.