Float Crea Div Overlapping

Ho due div (uno dentro l'altro) e sto correndo un po 'di problemi quando faccio fluttuare quello interno a "sinistra". Il problema è che il div esterno non espande la sua altezza per adattarsi al testo all'interno del div interno. Dato che questo è probabilmente piuttosto confuso, cercherò di spiegarlo con un po 'di codice.Float Crea Div Overlapping

HTML:

<body> 
    <div id="div1"> 
     Inner Div: 
     <div id="div2">Testing long content.</div> 
    </div> 
</body>

CSS:

#div2 { 
    float: left; 
    width: 10px; 
}

Io invece spero che quando testato questo in realtà mostra il mio problema in quanto non ho avuto la possibilità di testare questo. Il mio codice reale ha più proprietà che metterò queste se necessario.

fonte

2009-06-21 PF1

È necessario utilizzare la correzione rapida. Inserisci quanto segue dopo il tuo floated div e all'interno del div contenente.

<div class="clear"></div>

e aggiungere il seguente stile:

.clear { clear:both; }

Esempio:

<div class="container"> 
    <div class="floatedDiv">Hello World</div> 
    <div class="clear"></div> 
</div>

fonte

2009-06-21 03:49:03 Sampson

Grazie Jonathan: Questo ha funzionato alla grande! – PF1

genio :) il suo lavoro –

Non è una soluzione. È solo chiaro Hai solo bisogno di cancellare il galleggiante :) –

(la terza volta oggi :-)) dare l'overflow div esterno: hidden;
e larghezza.

fonte

2009-06-21 03:49:55

Davvero? Mi dispiace così tanto, davvero. Penso di dover lavorare sulla modifica delle mie query di ricerca per esprimere meglio quello che gli altri chiamano lo stesso problema. – PF1

... o auto –

Aggiungere una larghezza a un elemento per assicurarsi che aumenti di altezza rende il codice CSS difficile da leggere, dubito che sia una soluzione ragionevole. Lo zoom: 1 soluzione mi sembra migliore, ma probabilmente non sarà valido c3 w3c. L'overflow: nascosta anche una bella soluzione ma rende anche difficile la lettura del tuo css perché non riguarda l'overflow per nascondere il contenuto ma anche per permettere all'elemento di crescere di dimensioni. – Michiel

Se non si desidera aggiungere ulteriore margine di profitto per il codice HTML o aggiungere una larghezza al div esterno, è possibile utilizzare:

#div1 { 
    overflow:hidden; /* clears float for most browsers */ 
    zoom:1;   /* clears float for IE6   */ 
    }

fonte

2009-06-21 11:45:12 Emily

Ho pensato che l'overflow: nascosto ha funzionato anche in IE6? – alex

No. Per cancellare i float per IE6 devi invocare hasLayout. Questo viene fatto dando all'elemento una posizione, un float, una visualizzazione, una larghezza, un'altezza o uno zoom. Dare larghezza o altezza è il modo più comune per invocare hasLayout ma a volte non si desidera specificare una dimensione e lo zoom è il più trasparente. Vedi hasLayout.net per maggiori informazioni. – Emily

Ah - Aggiungo display: blocca generalmente tutto ciò che contiene elementi flottanti. – alex

Forse utile notare che c'è anche il codice ben noto clearfix da positioniseverything scritto specificamente per questo problema ed è probabilmente il più robusto e facile da applicare in qualsiasi situazione. Il CSS si presenta come segue:

<style> 
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
div.clearfix { display: inline-block; margin: 0 0 8px 0; } 
/* Hides from IE-mac \*/ 
* html div.clearfix { height: 1%; } 
div.clearfix { display: block; } 
/* End hide from IE-mac */ 
</style>

Per utilizzarlo nella vostra situazione si dovrebbe effettuare le seguenti operazioni:

<body> 
<div id="div1" class="clearfix" >Inner Div: 
<div id="div2">Testing long content.</div> 
</div> 
</body>

fonte

2009-06-21 17:47:18 Michiel

l'altezza: 1% ha risolto il mio intero problema. Non so perché però. Potresti spiegare cosa fa nel contesto di una serie di elementi fluttuanti con 2 o più elementi non fluttuanti alla sua coda? – Emanegux

Mentre le soluzioni di cui sopra dovrebbero funzionare, immagino che vale la pena sottolineare che c'è una trucco magico che non ho ancora visto considerato (in questo thread).

Basta spostare # div1 a sinistra. Quando si fa fluttuare l'elemento genitore, si cancella automaticamente l'elemento figlio - abbastanza utile, davvero. Potresti costruire un intero layout di pile flottanti, e poi avere una finale libera alla fine, e sarebbe abbastanza affidabile.

fonte

2009-06-22 08:26:18

Purtroppo i galleggianti sono molto avvincenti. Meglio usarli con parsimonia e cospargere lo strano trabocco: nascosto; – GlennG

Float Crea Div Overlapping

risposta

Problemi correlati