zoukankan      html  css  js  c++  java
  • css使用flex布局实现自适应

    <div id="box">
    <div class="col">
    			<div class="left">
        <div class="item">
            <div class="num">56</div>
            <div class="text">上传知识</div>
        </div>
    </div>
    			<div class="center">
    <div class="item">
            <div class="num">56</div>
            <div class="text">上传知识</div>
        </div>
    
    </div>
    			<div class="right">
    <div class="item">
            <div class="num">56</div>
            <div class="text">上传知识</div>
        </div>
    
    </div>
    		</div>
        <div class="col">
    			<div class="left">
        <div class="item">
            <div class="num">56</div>
            <div class="text">上传知识</div>
        </div>
    </div>
    			<div class="center">
    <div class="item">
            <div class="num">56</div>
            <div class="text">上传知识</div>
        </div>
    
    </div>
    			<div class="right">
    <div class="item">
            <div class="num">56</div>
            <div class="text">上传知识</div>
        </div>
    
    </div>
    		</div>
    </div>
    
    <style>
    /* ===============================构建思路:利用flex子元素布局的flex-grow,对空白空间的占用,非常容易实现自适应布局。=============================== */
    *{margin: 0; padding: 0;}
    #box .col{display: flex;}
    #box .col .num{
        font-size: 2.8rem;
        color: #2a304a;
        letter-spacing: 0;
        line-height: 3rem;
        font-weight: 700;
        padding-bottom: .8rem
    }
    
    #box .col .text{
        font-size: 1.4rem;
        color: #666;
        letter-spacing: 0;
        line-height: 1.8rem;
        font-weight: 400
    }
    
    #box .col .left{ 30%; height: 96px;}
    #box .col .center{/* flex: 1; */margin:0 auto;/* text-align:center; */}
    #box .col .right{ 30%;margin-right:1%;text-align: right;}
    #box .col .right .item .num{
        margin-right:2.2rem;
    }
    
    
    </style>
    
  • 相关阅读:
    命令模式
    装饰者模式
    迭代器模式-统一集合的遍历方式
    springboot源码解析-管中窥豹系列之总体结构
    启动项目tomcat报错
    在项目中部署redis的读写分离架构(包含节点间认证口令)
    Redis的几个核心机制底层原理
    Java内存模型
    JAVA原子组件和同步组件
    DataGrid 删除一行数据
  • 原文地址:https://www.cnblogs.com/tangyouwei/p/14815603.html
Copyright © 2011-2022 走看看