Wie man die Höhe eines div passt, um seine floated Kinder zu wickeln

Question

Ich habe ein div um zwei Kinder gewickelt, einer schwebte links und der andere rechts. Ich möchte einen Rahmen und einen Hintergrund um die Kinder legen, aber das div hat eine Höhe von 0, da es sich nicht an die Größe der Kinder anpasst. Hier

ist ein Beispiel davon in Aktion: http://jsfiddle.net/VVZ7j/17/

ich die roten Hintergrund wollen den ganzen Weg hinunter gehen. Ich habe Höhe versucht: Auto, aber das hat nicht funktioniert.

Alle und alle Hilfe wäre dankbar, danke.

P.S. Ich möchte kein Javascript verwenden, wenn das möglich ist.

Answer 1

Dies ist ein häufiges Problem beim Arbeiten mit Floats. Es gibt mehrere gebräuchliche Lösungen, die ich nach persönlicher Präferenz geordnet habe (bestes Vorgehen zuerst):

1. Verwenden Sie das :: After CSS-Pseudoelement. Dies ist bekannt als "Clearfix" und funktioniert IE8 und höher. Wenn Sie Kompatibilität mit früheren Versionen von IE benötigen, this answer should help. Example.

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

2. Fügen Sie die beiden Schwimmer in einen Behälter mit dem CSS-Attribut overflow: auto oder overflow: hidden. Dieser Ansatz kann jedoch Probleme verursachen (z. B. wenn eine QuickInfo die Kanten des übergeordneten Elements überlappt, wird eine Bildlaufleiste angezeigt). Example.

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

3. Fügen Sie dem übergeordneten Element eine festgelegte Höhe hinzu. Example.

   <div style="height: 200px"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

4. Machen Sie das Elternelement zu einem Float. Example.

   <div style="float: left"> 
       <div style="float: left"></div> 
       <div style="float: left"></div> 
   </div> 
   

5. ein div nach den Schwimmern mit clear: both hinzufügen. Example.

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

Answer 2

Fügen Sie overflow: hidden; zu #wrap hinzu. Dies ist ein clear fix. Hier einige Dokumentation über sie: http://positioniseverything.net/easyclearing.html

LE: Darüber hinaus gibt es mehrere Möglichkeiten, wie Sie dies erreichen können, in Abhängigkeit des Browsers compatibilty:

1. Überlauf hinzufügen: versteckt an den übergeordneten Container.

#wrap { overflow: hidden; }

1. ein Pseudoelement verwenden clear: both hinzuzufügen.

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

1. Die am häufigsten verwendete tehnique ist ein extra als letztes Element des Mutterbehälters hinzuzufügen.

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

I preffer not den 3. ein verwenden, wie Sie zusätzlichen HTML-Markup zu bekommen.

Answer 3

Versuchen Sie, overflow: hidden zu Ihrem #wrapdiv hinzuzufügen.

Answer 4

Nur noch ein div mit Stil hinzufügen clear: both vor einem äußeren div dh hier schließen "wrap"

--Sample code--

<div id="wrap"> 
    <div id="left"> 
     <p>some content at left</p> 
    </div> 
    <div id="right"> 
     <p>some content at right</p> 
    </div> 
    <div style="clear:both"></div> 
</div> 

Answer 5

Ich bin gekommen, um diese "Micro-Clearfix" -Lösung von Nicolas Gallagher zu verwenden.

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */ 
.cf:before, 
.cf:after { 
    content:""; 
    display:table; 
} 

.cf:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.cf { 
    *zoom:1; 
} 

Fügen Sie einfach die zu Ihrem CSS und jedem Floats, fügen Sie den „cf“ Klasse der Umhüllung eines jeden Elements, das Kinder schwebte hat.