纯css 瀑布流
纯css 瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
-moz-column-count: 3;
/* Firefox */
-webkit-column-count: 3;
/* Safari 和 Chrome */
column-count: 3;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
width: 80%;
margin: 2em auto;
}
.test {
margin-bottom: 10px;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: #f60;
}
@media screen and (max-width: 800px) {
.box {
column-count: 2;
}
}
@media screen and (max-width: 500px) {
.box {
column-count: 1;
}
}
</style>
</head>
<body>
<div class="box">
<div class="test" style="height: 50px"></div>
<div class="test" style="height: 20px"></div>
<div class="test" style="height: 50px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
<div class="test" style="height: 90px"></div>
</div>
</body>
</html>
A little hug, little gift.
All of little something.
these are our meories.
