zoukankan      html  css  js  c++  java
  • 46.纯css实现瀑布流(flex)

    效果图

    HTML

    <div class="masonary">
                <div class="clumn">
                    <div class="item"> 
                        <div class="item__content" style="height: 100px;background: lightblue;">1 </div> 
                        <div class="item__content" style="height: 210px;background: orange;"> 2</div> 
                        <div class="item__content" style="height: 110px;background: lightcoral;">3 </div> 
                        <div class="item__content" style="height: 170px;background: lightgray;"> 4</div> 
                        <div class="item__content" style="height: 100px;background: lightblue;">5 </div> 
                        <div class="item__content" style="height: 180px;background: lightsteelblue;">6 </div> 
                    </div>
                </div>
                <div class="clumn">
                    <div class="item"> 
                        
                        <div class="item__content" style="height: 100px;background: lightblue;"> 7</div> 
                        <div class="item__content" style="height: 120px;background: lightsteelblue;">8</div> 
                        <div class="item__content" style="height: 60px;background: orange;"> 9</div> 
                        <div class="item__content" style="height: 200px;background: orange;">10 </div> 
                        <div class="item__content" style="height: 100px;background: lightcoral;">11 </div> 
                        <div class="item__content" style="height: 260px;background: lightgray;">12 </div> 
                    </div>
                </div>
                <div class="clumn">
                    <div class="item"> 
                        <div class="item__content" style="height: 130px;background: lightcyan;">13 </div> 
                        <div class="item__content" style="height: 199px;background: orange;">14 </div> 
                        <div class="item__content" style="height: 160px;background: lightcoral;">15 </div> 
                        <div class="item__content" style="height: 146px;background: orange;">16 </div> 
                        <div class="item__content" style="height: 160px;background: lightcoral;">17 </div> 
                        <div class="item__content" style="height: 111px;background: orange;">18 </div> 
                    </div>
                </div>
            </div>

    css

    .masonary{
                    width: 100%;
                    max-width: 1000px;
                    margin: auto;
                    display: flex;
                    flex-direction: column;
                    height: auto;
                }
                @media only screen and (min- 500px) { 
                    .masonary { flex-direction: row; } 
                }
                
                .clumn{
                    margin-left: 0.5rem;
                    display: flex; 
                    flex-flow: column wrap; 
                    width: 100%;
                }
                @media only screen and (max- 500px) { 
                    .clumn { width: 100%;max-width: 95%;margin: auto; } 
                }
                
                .clumn>.item>.item__content{
                    margin-bottom: 0.5rem;
                    color: white;
                    text-align: center;
                }
  • 相关阅读:
    6种负载均衡算法
    Java中volatile关键字
    剑指offer练习
    linux系统查看IP地址,不显示IP地址或者只显示127.0.0.1
    Nginx负载均衡配置
    集群应用Session一致性实现的三种方案
    rabbitMQ学习
    JDK1.8在LINUX下安装步骤
    ecplise部署gradle web项目
    Kubernetes下的应用监控解决方案
  • 原文地址:https://www.cnblogs.com/famLiu/p/7477474.html
Copyright © 2011-2022 走看看