<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>