Posizionamento alternato sinistro e destro con CSS

Question

Quindi, usando PHP sto visualizzando una pagina di immagini. Ho un tag div per contenere queste immagini.

Quello che sto cercando di fare, è il posizionamento alternativo di queste immagini sul lato sinistro e destro del browser.

Quindi l'ingresso 1 è posizionato sulla sinistra del scorrendo verso il basso ingresso 2 è posizionato sulla destra ecc

Se il mio div contenitore è style="position:relative;width=100%" Come faccio le mie immagini si alternano abbracciare il lato sinistro e di il browser?

Answer 1

per la sinistra-huggers:

style="float:left;clear:left;" 

e per il diritto-huggers

style="float:right;clear:right;" 

... anche se il contenitore non è sufficientemente larga per adattarsi più di 2 immagini in tutto, è non avrà bisogno delle dichiarazioni "chiare".

Answer 2

Set float: left; quando index%2 == 0 e float: right; quando index%2==1 index essendo una variabile indice di un iterazione ciclo sulle vostre immagini.

Answer 3

Ci sono diversi modi possibili, sarebbe la seguente:

CSS:

div img{ 
float:left; 
clear:both;  
} 
div img:nth-of-type(2n){ 
    float:right; 
} 

Controllare il Example

Se non volete che si alternano in questo modo, l'uso

div img{ 
float:left; 
clear:left;  
} 
div img:nth-of-type(2n){ 
    float:right; 
    clear:right; 
} 

A seconda del browser che si deve supportare (Internet Explorer 8 e versioni precedenti non supportano tale selettore), utilizzare una classe su tutte le immagini pari e sostituire :nth-of-type(2n) con quella classe.

Answer 4

In modo simile alle altre risposte

div img:nth-child(even) { float: right; clear: right; } 
div img:nth-child(odd) { float: left; clear: left; } 

Demo: http://jsfiddle.net/GL667/