使用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

回答