<!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; }
