码迷,mamicode.com
首页 > 其他好文 > 详细

瀑布流

时间:2017-08-24 19:56:20      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:scala   border   lang   1.0   containe   class   ble   har   jquery   

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="UTF-8">
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
            <title>登录</title>
            <link rel="stylesheet" href="../style/bootstrap.min.css" />
            <link rel="stylesheet" href="../style/common.css" />
            
            <script src="../controller/jquery-1.11.3.min.js"></script>
            <script src="../controller/bootstrap.min.js"></script>
            <script src=‘../controller/common.js‘></script>
            <script src="../controller/login.js"></script>
    </head>
    <style>
    /*大层*/
    .container{width:100%;margin: 0 auto;}
    /*瀑布流层*/
    .waterfall{
        -moz-column-count:2; /* Firefox */
        -webkit-column-count:2; /* Safari 和 Chrome */
        column-count:2;
        -moz-column-gap: 1em;
      -webkit-column-gap: 1em;
      column-gap: 1em;
    }
    /*一个内容层*/
    .item{
      padding: 1em;
      margin: 0 0 1em 0;
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
     border: 1px solid #eee;
    }
    .item img{
        width: 100%;
        margin-bottom:10px;
    }
    </style>
<body>
    <div class="container">
        <div class="waterfall">
            <img src="../img/index/aa.png" alt="" />
            <div class="icon"> 
                   <div class="item">
                        <img src="../img/index/cc.jpg" alt="" />
                   </div>
                   <div class="item">
                        <img src="../img/index/cc.jpg" alt="" />
                   </div><div class="item">
                        <img src="../img/index/cc.jpg" alt="" />
                   </div>
                   <div class="item">
                        <img src="../img/index/cc.jpg" alt="" />
                   </div>
                   <div class="item">
                        <img src="../img/index/cc.jpg" alt="" />
                   </div>
                   <div class="item">
                        <img src="../img/index/cc.jpg" alt="" />
                   </div>
                   <div class="item">
                        <img src="../img/index/cc.jpg" alt="" />
                   </div>
                   <div class="item">
                        <img src="../img/index/cc.jpg" alt="" />
                   </div>
                   <div class="item">
                        <img src="../img/index/cc.jpg" alt="" />
                   </div>
            </div>
            
        </div>
    </div>
</body>
</html>

 

瀑布流

标签:scala   border   lang   1.0   containe   class   ble   har   jquery   

原文地址:http://www.cnblogs.com/hai-cheng/p/7424273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!