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>
    
  • 相关阅读:
    禁用网络连接后无法访问本机数据库的问题
    DevExpress使用笔记
    DEV控件 皮肤问题
    SQLServer2008导入Excel遇到的问题
    InnoSetup使用笔记
    SQLServer清空数据库中所有表的数据
    MS SQL Server2000转换成MySQL
    由MySQL登录不了引发的一些问题
    onerror事件
    DIV+CSS一些小小的技巧
  • 原文地址:https://www.cnblogs.com/tangyouwei/p/14815603.html
Copyright © 2011-2022 走看看