亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css實(shí)現(xiàn)朋友圈照片排列布局的代碼

  發(fā)布時間:2020-06-10 15:48:54   作者:龐永勝   我要評論
純css實(shí)現(xiàn)朋友圈不同數(shù)量圖片不同布局,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

首先可以打開朋友圈觀察不同圖片數(shù)量的幾種布局,也可參考下圖示例;

可以發(fā)現(xiàn)除1張圖片,4張圖片特殊外,其他數(shù)量圖片均使用一行三列的方式排列;

假設(shè)有如下HTML代碼,這里imgList是一個圖片地址數(shù)組;

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

1、首先我們使用flex實(shí)現(xiàn)正常的三列布局:

設(shè)置為換行,每個元素占1/3或指定寬度,除每行最后一個元素(3n)都設(shè)置margin-right并通過預(yù)留間隔;

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選擇器判斷為一張圖片時,改變圖片大小即可;

選擇器邏輯:元素為 倒數(shù)第一個元素 && 第一個元素 時,則可判斷只有一個元素:對其樣式單獨(dú)設(shè)置覆蓋原樣式即可

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

 

3、對于四張圖片的情況時,圖片需呈 兩行兩列布局:這里就需對此種情況下的第二張圖片添加margin-right實(shí)現(xiàn)三列變兩列:

選擇器邏輯: 元素為 倒數(shù)第4個 && 第一個的元素時, 判斷為共有四個元素,
再選擇 其后的 同級元素 的第 2n 個后添加margin-right屬性;

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

再次之前需對第三個元素恢復(fù)間隔,或同朋友圈類似,四張照片是不顯示間隔,如有需求也可設(shè)置其他屬性,如下:(此屬性需在上一條屬性之前)

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

總結(jié)

到此這篇關(guān)于css實(shí)現(xiàn)朋友圈照片排列布局的文章就介紹到這了,更多相關(guān)css 圖片排列布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論

微信 投稿 腳本任務(wù) 在線工具