Posicionamiento alterno a la izquierda y a la derecha con CSS

Question

Utilizo PHP para mostrar una página de imágenes. Tengo una etiqueta div para contener estas imágenes.

Lo que estoy tratando de hacer, es posicionar estas imágenes alternativamente en el lado izquierdo y derecho del navegador.

Así entrada 1 se sitúa a la izquierda del el desplazamiento hacia abajo entrada 2 se coloca a la derecha etc.

Si mi contenedor div es style="position:relative;width=100%" ¿Cómo puedo hacer que mis imágenes se alternan abrazando el lado izquierdo y del ¿el navegador?

Answer 1

para la izquierda-huggers:

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

y por el derecho-huggers

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

... aunque si su envase no es lo suficientemente amplia como para caber más de 2 imágenes a través de, usted no necesitará las declaraciones "claras".

Answer 2

Conjunto float: left; cuando index%2 == 0 y float: right; cuando index%2==1 index siendo una variable índice de iteración de un bucle sobre sus imágenes.

Answer 3

Hay varias maneras posibles, uno sería el siguiente:

CSS:

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

Compruebe el Example

Si no quieren que se alternan de esa manera, el uso

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

Dependiendo de los navegadores que tenga que admitir (Internet Explorer 8 y versiones anteriores no son compatibles con ese selector), utilice una clase en todas las imágenes pares y reemplace :nth-of-type(2n) con esa clase.

Answer 4

En una línea similar a las otras respuestas

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

Demostración: http://jsfiddle.net/GL667/