zoukankan      html  css  js  c++  java
  • 瀑布流布局

    布局:

    css:

    .masonry {
    display: flex;
    flex-direction: column;
    }
    @media only screen and (min- 500px) {
    .masonry {
    flex-direction: row;
    }
    }

    .column {
    display: flex;
    flex-flow: column wrap;
    100%;
    }
    @media only screen and (min- 500px) {
    .masonry .column {
    100%;
    }
    }
    /*
    .masonry .item {
    box-sizing: border-box;
    padding: 10px;
    counter-increment: item-counter;
    }*/
    .masonry .item__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    100%;
    box-sizing: border-box;
    color: #18314F;
    }
    /*.masonry {
    display: flex;
    flex-direction: column;
    }


    .masonry .column {
    display: flex;
    flex-flow: column wrap;
    100%;
    }
    */

    .masonry .column .item {
    box-sizing: border-box;
    counter-increment: item-counter;
    padding:0px;
    transition:all 0.3s;
    }
    .masonry .column .item:hover {
    background-color:#e8e8e8;
    transform:scale(1.05);
    }

  • 相关阅读:
    C#异步编程
    3.TinkPHP中的模型
    Socket网络编程
    日志查看登录用户
    ssh相关的设置
    爬虫学习笔记
    python升级到3.*版本
    Redis未授权访问攻击过程与防范
    Linux重置MySQL密码
    linux下WordPress安装
  • 原文地址:https://www.cnblogs.com/wjhaaa/p/9146481.html
Copyright © 2011-2022 走看看