Example demonstration of dynamic calculation with calc() in CSS

I. Introduction

A recent demand, as shown in the figure below, the number of registered people here will be less data, and the last three data will be more, that is, it will be longer, so the first one is the width given by the number of registered people is different from the other three.

2. Thinking

1. The first small div is the number of registered people width: 20%;
2. The first three small divs have a right spacing, the last one is not added, the spacing is margin-right: 8px, there are three spacings, so the spacing is integrated: 24px;
3. The total width is 100%, minus the spacing ((100%-20%) -24px) / 3

Three, specific steps

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

Four, summary

In this case, the calc() function is used to dynamically calculate the length value.

• Note that, 运算符前后都需要保留一个空格，for example: width: calc(100%-10px);
• Any length value can be calculated using the calc() function;
• The calc() function supports "+", "-", "*", "/" operations;
• The calc() function uses standard mathematical operation priority rules;

note:

width:calc(100%-100px);-can't work

width:calc(100%-100px);-ready to use

The two values ​​in calc() calculation must have a space between the same operation symbol, otherwise it will not work