css完成盆友圈相片排序合理布局的编码

日期:2021-02-27 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

最先能够开启盆友圈观查不一样照片数量的几种合理布局,也可参照下图示例;

能够发现除1张照片,4张照片独特外,别的数量照片均应用1行3列的方法排序;

假定有以下HTML编码,这里imgList是1个照片详细地址数字能量数组;

<ul>
    <li v-for="(item, index) in imgList" :key=index >
        <img :src="item">
    </li>
</ul>

1、最先大家应用flex完成一切正常的3列合理布局:

设定为换行,每一个元素占1/3或特定宽度,除每行最终1个元素(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、针对仅有1张照片状况,只需用css挑选器分辨为1张照片时,更改照片尺寸便可;

挑选器逻辑性:元素为 倒数第1个元素 && 第1个元素 时,则可分辨仅有1个元素:对其款式独立设定遮盖原款式便可

ul li: nth-last-child(1): first-child{
  width: 200px;
  height: 200px;
}

 

3、针对4张照片的状况时,照片需呈 两行多列合理布局:这里就需对此种状况下的第2张照片加上margin-right完成3列变多列:

挑选器逻辑性: 元素为 倒数第4个 && 第1个的元素时, 分辨为共有4个元素,
再挑选 其后的 同级元素 的第 2n 个后加上margin-right特性;

ul li: nth-last-child(4): first-child ~ li: nth-child(2n){
  margin-right: 32%;
}

再度以前需对第3个元素修复间距,或同盆友圈相近,4张相片是无法显示间距,如有要求也可设定别的特性,以下:(此特性需在上1条特性以前)

ul li: nth-last-child(4): first-child , ul li: nth-last-child(4): first-child ~ li{
  width: 50%;
  margin-right: 0;
}

总结

到此这篇有关css完成盆友圈相片排序合理布局的文章内容就详细介绍到这了,更多有关css 照片排序合理布局內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!