Abwechselnd links und rechts Positionierung mit CSS

Question

So mit PHP Ich zeige eine Seite von Bildern. Ich habe ein div-Tag, um diese Bilder zu enthalten.

Was ich versuche zu tun, ist alternative Positionierung dieser Bilder auf der linken und rechten Seite des Browsers.

So 1 Eintrag auf der linken Seite Scrollen nach unten positioniert ist Eintrag 2 ist auf der rechten Seite positioniert usw.

Wenn mein div Container ist style="position:relative;width=100%" Wie kann ich meine Bilder mit der linken und Seite wechseln sich umarmt von der Browser?

Answer 1

für den links huggers:

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

und für den rechten huggers

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

... obwohl, wenn Ihr Behälter nicht breit genug ist, mehr als zwei Bilder über passen, Sie wird nicht die "klaren" Deklarationen benötigen.

Answer 2

Set float: left; wenn index%2 == 0 und float: right; wenn index%2==1 index eine Indexvariable einer Schleife Iterieren über Ihre Bilder zu sein.

Answer 3

Es gibt mehrere Möglichkeiten, würde man wie folgt sein:

CSS:

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

das Prüfen Example

Wenn Sie nicht wollen, wechseln sie auf diese Weise, den Einsatz

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

Abhängig von den Browsern, die Sie unterstützen müssen (Internet Explorer 8 und niedriger unterstützt diesen Selektor nicht), verwenden Sie eine Klasse für alle geraden Bilder und ersetzen Sie :nth-of-type(2n) durch diese Klasse.

Answer 4

In ähnlicher Weise zu den anderen Antworten

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

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