1.問題：

  在左右布局中間定位一張圖片后仑扑，屏幕分辨率改變后步淹，位置錯(cuò)亂，如圖：

image.png

首先捧请，大致描述一下代碼：

/*我的資源贩毕，數(shù)據(jù)總量*/
export const Total = (props) => {
    return (
        <div className={ style.total }>
            <Row>
                <Col span={4}>
                    <div className={ style.total_left }>
                        <div></div>
                        <div></div>
                    </div>
                    ![](/static/img/desktop/total.png)
                </Col>
                <Col span={20}>
                    <div className={ style.total_right }>
                        <div>
                            <p>
                                <span>2351</span>
                                <span>萬</span>
                            </p>
                        </div>
                        <div className={ style.bg_color }>數(shù)據(jù)總量</div>
                    </div>
                </Col>
            </Row>
        </div>
    )
}

之前的css是這樣寫的：

/*我的資源刺彩，數(shù)據(jù)總量*/
.total{
    border: 2px solid @second-color;
    margin-top: 55px;
    height: 130px;
    .total_left{
        border-right: 2px solid @second-color;
        /* width: 32px; */
        div:nth-child(1){
            border-bottom: 2px solid @second-color;
            height: 64px;
        }
        div:nth-child(2){
            height: 64px;
        }
    }
    .img{
        position: relative;
        top: -84px;
        left: 12px;
    }
    .total_right{
        text-align: right;
        p{
            height: 96px;
            line-height:96px;
            padding-right: 5px;
            .font-over-hide;
            span:nth-child(1){
                font-size: 36px;
            }
            span:nth-child(2){
                font-size: 20px;
            }
        }
        .bg_color{
            height: 30px;
            line-height: 30px;
            background-color: @second-color;
            color: #000;
            font-size: 18px;
            padding-right: 5px;
        }
    }
}

后來的css是這樣寫的：

.total{
    border: 2px solid @second-color;
    margin-top: 55px;
    height: 130px;
    position: relative;//父元素相對(duì)定位
    .total_left{
        border-right: 2px solid @second-color;
        /* width: 32px; */
        div:nth-child(1){
            border-bottom: 2px solid @second-color;
            height: 64px;
        }
        div:nth-child(2){
            height: 64px;
        }
    }
    .img{
       /*注意：定位圖片要用絕對(duì)定位，top和left要用百分比取值躯砰，最后一定要限制圖片寬度為100%*/
        position: absolute;//定位圖片定位
        top: 40%;
        left: 43%;
        width : 100%;
    }
    .total_right{
        text-align: right;
        p{
            height: 96px;
            line-height:96px;
            padding-right: 5px;
            .font-over-hide;
            span:nth-child(1){
                font-size: 36px;
            }
            span:nth-child(2){
                font-size: 20px;
            }
        }
        .bg_color{
            height: 30px;
            line-height: 30px;
            background-color: @second-color;
            color: #000;
            font-size: 18px;
            padding-right: 5px;
        }
    }
}

修改后的效果是這樣的：

image.png