Question

所以使用PHP我正在显示一页图像。我有一个div标签用于包含这些图片。

我试图做的是将这些图像交替放置在浏览器的左侧和右侧。

因此，条目1位于左侧向下滚动条目2位于右侧等

如果我的div容器是style="position:relative;width=100%" 如何让我的图像交替拥抱浏览器的左侧和侧面？

Answer 1

有几种可能的方法，一种方法如下：

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)替换为该类。

Answer 2

左抱抱者

：

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

和右抱抱者

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

...虽然如果你的容器不够宽，不能容纳2个以上的图像，你就不需要“清晰”声明。

Answer 3

在float: left;时设置index%2 == 0，在float: right;时设置index%2==1 index是迭代图像的循环的索引变量。

Answer 4

与其他答案类似

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