实例演示CSS里用calc()动态计算

一、前言

最近的一个需求，如下图注册人数这里数据会少，后面三个数据会多，也就是会比较长，所以第一个也就是注册人数所给的宽度和其他三个是不同的

二、思路

1. 第一个小div也就是注册人数 width: 20%;
2. 前三个小div都有一个右间距，最后一个不加，间距为margin-right: 8px，有三个间距，所以间距综合：24px;
3. 总宽度为100%，减去间距 ((100% - 20%) -24px) / 3

三、具体步骤

1、html

<div class="num">
              <div class="register">
                <span>注册人数</span>
                <p class="register_num">{
   
   { item.l_total_num }}</p>
              </div>
              <div class="register">
                <span>充值总额</span>
                <p class="recharge_num">{
   
   { item.l_recharge_total }}</p>
              </div>
              <div class="register">
                <span>提现总额</span>
                <p class="withdrawal_num">{
   
   { item.l_withdraw_total }}</p>
              </div>
              <div class="register">
                <span>剩余总额</span>
                <p class="residue_num">{
   
   { item.l_surplus_total }}</p>
              </div>
            </div>

2、css

.register:first-child {
    
    
    width: 20%;
}
.register:last-child {
    
    
    margin-right: 0;
}
.register {
    
    
          width: calc(((100%-20%) - 24px) / 3);
          margin-right: 8px;
          span {
    
    
            color: #999;
          }
          .register_num,
          .recharge_num,
          .residue_num,
          .withdrawal_num {
    
    
            font-size: 13px;
            color: #333;
            margin-top: 5px;
          }
          .recharge_num {
    
    
            color: #39b54a;
          }
          .residue_num {
    
    
            color: #e6432d;
          }
        }

四、总结

这个案例用到了calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；

注意：

width:calc(100%-100px);——无法起作用

width:calc(100% - 100px);——可以使用了

calc()计算中的两个值必须同运算符号之间存在空格，否则不会起作用