clearing nested floats

Question

Sto creando una griglia piastrellata di immagini molto simile a una galleria di immagini con una griglia di miniature e ho bisogno che le immagini si avvolgano nella riga successiva dopo 3 immagini. Quindi sto fluttuando un gruppo di div che contengono ciascuna un'immagine e poi cancellano il float manualmente dopo tre immagini.

Il problema è che sto lavorando all'interno di un modello esistente piuttosto contorto che già utilizza float per organizzare tutto. Cancellare il float nella mia griglia rimescola l'intera pagina, presumibilmente perché cancella ogni float nella pagina fino a quel momento. Cosa posso fare?

Sto svuotando il galleggiante utilizzando inserendo un div vuoto. es .:

Uno degli altri metodi per svuotare i galleggianti funziona meglio?

Answer 1

Se il markup è in questo modo:

div 
img 
img 
img 
row break 
img 
img 
img 
... 

Allora avete bisogno di aggiungere questo dopo ogni tre blocchi:

<br class="clear" /> 

Ma se il tuo markup è come questo:

div 
div 
    img 
    img 
    img 
div 
    img 
    img 
    img 
... 

.. poi basta applicare la seguente classe .clear ai DIV interni.

In entrambi i casi, aggiungere questo al tuo foglio di stile:

.clear:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
* html .clear { height: 1%; } 
*:first-child+html .clear { min-height: 1px; } 

È possibile utilizzare questa classe per tutti gli altri elementi che contengono galleggianti.

Answer 2

Se IE> = 8 supporto va bene per te, potresti prendere in considerazione l'utilizzo di display: table invece di float. Dal momento che vuoi visualizzare una griglia, questo è il modo più appropriato per farlo.

http://www.quirksmode.org/css/display.html#table

Answer 3

mi piacerebbe provare a utilizzare display: inline-block; per lo stile degli elementi contenenti ciascuna immagine. Esempio di codice HTML per un contenitore:

 
<style> 
.figure { 
    display: inline-block; 
} 
</style> 

<div class="figure"> 
    <img src="littlepony.jpg" alt="My cute little pony" width="13" height="37" /> 
</div> 

Ora lì un paio di insidie ​​che utilizzano questo con IE6, IE7 e Firefox 2:

• IE 6 e 7 saranno solo gli elementi di stile in linea che hanno hasLayout innescato , voglio dire vedrete inline-block comportamento se si fa questo:

 
<!--[if lte IE 7]> 
.figure { 
    display: inline; 
    zoom: 1; /* triggering hasLayout */ 
} 
<![endif]--> 

• Firefox 2 non capisce display: inline-block; quindi dovrete far precedere quest'ultimo da un'altra istruzione di visualizzazione:

 
.figure { 
    display: -moz-inline-stack; 
    display: inline-block; 
} 

• ora Firefox 2 sta per infastidire un po '. Innanzitutto, devi avere un solo elemento figlio nell'elemento .figure, altrimenti i bambini ...pila. Quindi, se avete una leggenda sotto l'immagine, inserire un div tra div.figure e img + p

 

    <div> 
     <img src="littlepony.jpg" alt="Photo of my cute little pony" width="13" height="37" /> 
     <p>Second child of .figure>div and not .figure</div> 
    </div> 
</div> 

Secondo (ancora solo in FX2), si noterà di tanto in tanto che si puo' Non è più possibile selezionare il testo all'interno dell'elemento -moz-inline-stack né fare clic sui collegamenti che potrebbe contenere. La correzione è quello di posizionare il div aggiunto relativamente:

 
    .figure div { 
     position: relative; 
    } 

Naturalmente il commento condizionale per IE6/7 deve essere successiva regolare CSS, altrimenti sarà di poco aiuto.

E infine, se nessuna soluzione elegante funziona per voi, utilizzare una tabella. Una tabella semplice con solo td e no th. Se si verifica che:

• IE6 e 7 non piace display: table-sth
• vostro CMS causa problemi a ciò che altrimenti funzionare bene su un altro sito
• Firefox 3 il supporto per inline-block è di alcun aiuto

che sì è meglio per tutti che si utilizza una tabella e nessuna mezza soluzione causando problemi a metà dei tuoi utenti;)

Answer 4

1. Creare un adeguato div contenitore (se non ne hai già uno)
2. impostare una larghezza restrittiva sul div container - eguagliando gli stessi che 3 immagini riprende.
3. Consentire il galleggiamento di tutte le immagini: saranno automaticamente a capo.
4. Impostare il contenitore div con 'overflow: hidden', che cancellerà i float per voi.

Una versione semplificata potrebbe assomigliare a questo:

<style> 

div#container { 
    overflow: hidden; 
    width: 300px; 
} 

div#container img { 
    float: left; 
    width: 100px; 
} 

</style> 

<div id="container"> 

    <img src="" /> 
    <img src="" /> 
    <img src="" /> 


    <img src="" /> 
    <img src="" /> 
    <img src="" /> 


    <img src="" /> 
    <img src="" /> 
    <img src="" /> 

</div>