Fare div esterno è automaticamente la stessa altezza del suo contenuto flottante

Question

Voglio l'esterno div, che è nero per avvolgere i suoi div s galleggianti al suo interno. Non voglio usare style='height: 200px nello div con l'ID outerdiv perché voglio che sia automaticamente l'altezza del suo contenuto (ad esempio, il galleggiante div s).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'> 
<div style='width=300px;border: red 1px dashed;float: left;'> 
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 
</div> 

<div style='width=300px;border: red 1px dashed;float: right;'> 
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> 
</div> 

Come raggiungere questo obiettivo?

Answer 1

È possibile impostare i CSS s' il outerdiv a questo

#outerdiv { 
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */ 
} 

È anche possibile fare questo con l'aggiunta di un elemento alla fine con clear: both. Questo può essere aggiunto normalmente, con JS (non una buona soluzione) o con :after pseudo elemento CSS (non ampiamente supportato in IE precedenti).

Il problema è che i contenitori non si espandono naturalmente per includere i bambini flottanti. Tieni presente che se utilizzi il primo esempio, se hai elementi figli al di fuori dell'elemento padre, saranno nascosti. Puoi anche usare 'auto' come valore della proprietà, ma invocherà barre di scorrimento se qualche elemento appare all'esterno.

Si può anche provare a flottare il contenitore genitore, ma a seconda del progetto, questo può essere impossibile/difficile.

Answer 2

Si consiglia di provare carri auto-chiusura, come indicato a http://www.sitepoint.com/simple-clearing-of-floats/

Quindi, forse, provare uno overflow: auto (di solito funziona), o overflow: hidden, come ha detto Alex.

Answer 3

Prima di tutto non si utilizza width=300px che è un'impostazione di attributo per il tag non CSS, utilizzare invece width: 300px;.

Suggerirei di applicare la tecnica clearfix sullo #outerdiv. Clearfix è una soluzione generale per svuotare 2 div fluttuanti in modo che il div padre si espanda per accomodare i 2 div fluttuanti.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'> 
    <div style='width:300px; float: left;'> 
     <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 
    </div> 

    <div style='width:300px; float: left;'> 
     <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> 
    </div> 
</div> 

Ecco un example della vostra situazione e che cosa fa Clearfix per risolverlo.

Answer 4

In primo luogo, consiglio vivamente di eseguire lo stile CSS in un file CSS esterno, anziché eseguirlo in linea. È molto più semplice da mantenere e può essere più riutilizzabile utilizzando le classi.

Lavorare fuori la risposta di Alex (& clearfix di Garret) di "aggiungendo un elemento alla fine con clear: both", si può fare in questo modo:

<div id='outerdiv' style='border: 1px solid black; background-color: black;'> 
     <div style='width: 300px; border: red 1px dashed; float: left;'> 
      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 
     </div> 

     <div style='width: 300px; border: red 1px dashed; float: right;'> 
      <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> 
     </div> 
     <div style='clear:both;'></div> 
    </div> 

Questo funziona (ma come si può vedere in linea CSS non è così carino).

Answer 5

utilizzare jQuery:

Set Parent Altezza = Bambino offsetHeight.

$(document).ready(function() { 
    $(parent).css("height", $(child).attr("offsetHeight")); 
} 

Answer 6

Usa clear: both;

ho trascorso più di una settimana cercando di capire questo fuori!

Answer 7

So che alcune persone mi odieranno, ma ho trovato display:table-cell per aiutare in questo caso.

È molto più pulito.