使用CSS交替左右定位

所以使用PHP我正在顯示一頁圖像。我有一個包含這些圖片的div標籤。使用CSS交替左右定位

什麼即時試圖做的，是交替定位於瀏覽器的左側和右側的這些圖像。

所以第1項被定位在左側向下滾動進入2位於右側等

如果我的div容器是style="position:relative;width=100%" 如何讓我的圖片的替代擁抱的左側和側瀏覽器？

2012-08-02 Ralph

沒有足夠的信息... – Christoph 2012-08-02 16:11:35

好像所有的答案給我的解決方案，其中左圖像和右圖像上相同的水平線 - 但我尋找左側的圖像，比向下滾動，然後右側的圖像等 – Ralph 2012-08-02 16:59:15

明確：左和明確：這些解決方案的右側部分應使他們垂直線，而不是水平。 – Faust 2012-08-02 18:24:28

左擁抱者：

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

和正確的環保人士

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

...但如果你的容器不夠寬，以適應超過2個圖像跨越，你將不需要「清楚」的聲明。

2012-08-02 16:11:40 Faust

設置float: left;時index%2 == 0和float: right;當index%2==1 index是一個迭代循環在你的圖像的索引變量。

2012-08-02 16:12:34 kgautron

可能有幾種方式，一種是以下幾點：

CSS：

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

檢查Example

如果你不希望他們交替那樣，使用

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

根據您必須支持的瀏覽器（Internet Explorer 8及更低版本不支持該選擇器），請在所有偶數圖像上使用一個類，並將:nth-of-type(2n)替換爲該類。

2012-08-02 16:12:47 Christoph

我只是想提出這個建議。對於任何交替式樣規則，CSS唯一解決方案是我的首選方法。 – 2012-08-02 16:13:50

@Ralph你可以通過點擊左邊的複選標記來接受答案，向Stackoverflow社區表明你的問題已經解決。 – Christoph 2012-08-02 17:24:43

好的解決方案，但要小心：第ñ類型需要IE9或更高版本。 – Faust 2012-08-02 18:25:24

與此相類似的其他答案

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

2012-08-02 16:16:14 coyotebush

回答