<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>瀑布流效果</title>
<link rel="stylesheet" href="style.css" style="text/css">
</head>
<body>
<div class="container">
<div><img src="img/1.jpg">
<p>这是图片的展示</p>
</div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/5.jpg"></div>
<div><img src="img/6.jpg"></div>
<div><img src="img/7.jpg"></div>
<div><img src="img/8.jpg"></div>
<div><img src="img/9.jpg"></div>
</div>
</body>
</html>
.container{
/*瀑布流CSS*/
column-width:440px;
column-gap:5px;
/*浏览器适应*/
-webkit-column-width:440px;
-webkit-column-gap:5px;
}
.container div{
width:250px;
margin:5px 0px;
}
.container p{
text-align:center;
}
转载请注明原文地址: https://ju.6miu.com/read-775.html
