基于CSS多列实现瀑布流

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- ie */
    /* -o 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;
}

 

转载于:https://www.cnblogs.com/xiaobaizhiqian/p/8280475.html

你可能感兴趣的:(基于CSS多列实现瀑布流)