Zmienne lewe i prawe pozycjonowanie za pomocą CSS

Question

Używając PHP, wyświetlam stronę obrazów. Mam znacznik div zawierający te obrazy.

Co próbuję zrobić, to alternatywne pozycjonowanie tych obrazów po lewej i prawej stronie przeglądarki.

więc pozycja 1 jest umieszczony po lewej przewijając pozycja 2 jest umieszczony po prawej stronie itp

Jeśli mój div pojemnik jest style="position:relative;width=100%" Jak zrobić moje obrazy Alternatywny obejmując lewą i stronę przeglądarka?

Answer 1

dla lewicowo-Huggers:

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

i dla prawej Huggers

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

... choć jeśli pojemnik nie jest wystarczająco szeroka, aby zmieścić więcej niż 2 zdjęć w poprzek, ty nie będą potrzebować "wyraźnych" deklaracji.

Answer 2

Set float: left; gdy index%2 == 0 i float: right; gdy index%2==1 index jest zmienna indeksem iteracji pętli nad swoimi obrazami.

Answer 3

Istnieje kilka możliwych sposobów, jeden byłby następujący:

CSS:

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

Sprawdź Example

Jeśli nie chcesz ich przemian w ten sposób, zastosowanie

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

W zależności od obsługiwanych przeglądarek (program Internet Explorer 8 i nowsze nie obsługują tego selektora), należy użyć klasy na wszystkich obrazach pełnych i zastąpić ją klasą :nth-of-type(2n).

Answer 4

W podobnym duchu do innych odpowiedzi

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

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