css实现朋友圈照片排列布局
2024-09-07 05:24:26
纯css实现朋友圈不同数量图片不同布局
首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例;
可以发现 除1张图片,4张图片特殊外,其他数量图片均使用一行三列的方式排列;
假设有如下HTML代码,这里imgList是一个图片地址数组;
<ul>
<li v-for="(item, index) in imgList" :key=index >
<img :src="item">
</li>
</ul>
1、首先我们使用flex实现正常的三列布局:
设置为换行,每个元素占1/3或指定宽度,除每行最后一个元素(3n)都设置margin-right并通过预留间隔;
ul{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
li{
width: 32%;
height: 100px;
margin-top: 5px;
}
.list:not(:nth-child(3n)) {
margin-right: 2%;
}
2、对于只有一张图片情况,只需用css选择器判断为一张图片时,改变图片大小即可;
选择器逻辑:元素为 倒数第一个元素 && 第一个元素 时,则可判断只有一个元素:对其样式单独设置覆盖原样式即可
ul li: nth-last-child(1): first-child{
width: 200px;
height: 200px;
}
3、对于四张图片的情况时,图片需呈 两行两列布局:这里就需对此种情况下的第二张图片添加margin-right实现三列变两列:
选择器逻辑: 元素为 倒数第4个 && 第一个的元素 时, 判断为共有四个元素,
再选择 其后的 同级元素 的第 2n 个后添加margin-right属性;
ul li: nth-last-child(4): first-child ~ li: nth-child(2n){
margin-right: 32%;
}
再次之前需对第三个元素恢复间隔,或同朋友圈类似,四张照片是不显示间隔,如有需求也可设置其他属性,如下:(此属性需在上一条属性之前)
ul li: nth-last-child(4): first-child , ul li: nth-last-child(4): first-child ~ li{
width: 50%;
margin-right: 0;
}
最新文章
- nginx_https
- [Cordova] Plugin开发架构
- JS中函数的调用和this的值
- MyBatis学习--高级映射
- Java BigDecimal详解
- android 修改系统的dialog样式
- Java 集合深入理解(8):AbstractSequentialList
- ios NSString常见的字符串操作 分割 查找
- MySQL无法重启问题解决Warning: World-writable config file ‘/etc/my.cnf’ is ignored
- bigdata_spark_源码修改_本地环境搭建_eclise
- RPC框架基本原理(三):调用链路分析
- SQL递归查询知多少
- IBM Minus One 简单字符处理
- (2-2)SpringCloud-服务注册到Eureka Server集群并消费
- consul kv使用介绍
- 深入理解Java虚拟机读书笔记6----早期(编译期)优化
- babel在项目里的使用
- Centos系统压力测试 ab 命令安装与使用
- ASP.NET Boilerplate 学习
- android中webView加载H5,JS不能调用问题的解决
热门文章
- 「雕爷学编程」Arduino动手做(11)——金属触摸模块
- 4.2 Go switch
- Crystal | 水晶方法的七大特征,你了解吗?
- python3.x 基础七:面向对象进阶
- jQuery下实现等待指定元素加载完毕(可改成纯js版)
- jquery 根据 option 的 text 定位选中 option
- poj2125最小点权覆盖+找一个割集
- 【python爬虫】scrapy实战1--百万微博任性采集
- 织梦系统dedecms实现列表页双样式,列表样式循环交替变化
- C#用Linq对列表/集合进查询