使用CSS交替左右定位

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;
}

检查示例

如果您不希望它们以这种方式交替使用,请使用

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 个图像，则不需要“清晰”声明。