<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>瀑布流</title> ???<link rel="stylesheet" type="text/css" href="pbl.css"/></head><body><div class="container"> ???<div><img src="img/1.jpg"/></div> ???<div><img src="img/2.jpg"/></div> ???<div><img src="img/3.jpg"/></div> ???<div><img src="img/4.jpg"/></div>
.
.
.</div></body></html>
css
*{ ???padding: 0px; ???margin: 0px;}.container{ ???width: 1000px; ???column-width: 100px; ???-webkit-columns-width: 100px;/* safari chrome */ ???-ms-columns-width: 100px;/* ie */ ???-o-columns-width: 100px;/* opera */ ???-moz-columns-width: 100px;/* firefox */ ???column-gap: 5px; ???-webkit-column-gap: 5px; ???-ms-column-gap: 5px; ???-o-column-gap: 5px; ???-moz-column-gap: 5px; ???margin: 0px auto;}.container div{ ???width: 100px; ???border: 1px #000000 solid; ???margin-top: 5px; ???text-align: center; ???word-wrap:break-word;}.container img{ ???width: 100px; ???height: auto; ???display: block;}基于CSS多列实现瀑布流
原文地址：https://www.cnblogs.com/xiaobaizhiqian/p/8280475.html