css - 使用 CSS 交替左右定位

Question

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

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

因此条目 1 位于左侧向下滚动条目 2 位于右侧，依此类推。

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

score 8 · Accepted Answer

有几种可能的方法，一种是：

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

score 2 · Accepted Answer

对于左拥抱者：

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

对于右翼拥护者

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

...尽管如果您的容器不够宽，无法容纳超过 2 个图像，您将不需要“清晰”声明。

score 0 · Accepted Answer

设置float: left;何时index%2 == 0以及float: right;何时index%2==1 index成为遍历图像的循环的索引变量。

score 0 · Accepted Answer

与其他答案类似

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

4 回答 4