0%

纯css实现瀑布流布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.container{
width:1400px
margin:2epx auto
columns:4
column-gap:40px;
}

.container .box{
width:100%
margin-bottom: 10px;
}

.container .box img{
max-width:100%
border-radius:15px;
}

@media (max-width:1200px) {
.container {
width:calc(100% - 40px);
columns:3;
}
}

@media (max-width:768px) {
.container {
columns:2;
}
}

@media (max-width:480px) {
.container {
columns:1;
}
}
-------------本文结束感谢您的阅读-------------