使用CSS交替左右定位

前端之家收集整理的这篇文章主要介绍了使用CSS交替左右定位前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以使用 PHP我正在显示一个图像页面.我有一个div标签用于包含这些图片.

我试图做的是将这些图像交替定位在浏览器的左侧和右侧.

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

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

解决方法

有几种可能的方法,一种方法如下:

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).

原文链接:https://www.f2er.com/css/242252.html

猜你在找的CSS相关文章