antd Descriptions描述列表—div重构(灵活调整宽度比例)

Descriptions描述列表：用户信息展示
缺陷：
        （1）字段所占列表宽度比例不固定；
        （2）内容区域会根据值的字符长短来自动调整格子的宽度；

antd Descriptions描述列表：如下

因为其组件自适应的原因无法满足需求的固定样式排版，所以这里用 div块进行了模拟，对描述列表的重构，以满足需求的使用；

div块重构描述列表：如下

代码块：
       主要用到的是 CSS3自动计算宽度calc()函数 

        这里宽度用的24栅栏格式，当然如果想改成别的宽度，也可以自定义修改。如果一行中某列需要调宽，则该行其他元素也要同步去修改。

             <div className={styles.Descriptions}>
                {*第一行*}
                <div className={styles.grid}>
                  <div style={{ width: 'calc(100% / (24/2))' }} className={styles.title}>描述字段</div>
                  <div style={{ width: 'calc(100% / (24/7.2))' }} className={styles.content}><b>{0}</b></div>
                  <div style={{ width: 'calc(100% / (24/2))' }} className={styles.title}>描述字段</div>
                  <div style={{ width: 'calc(100% / (24/12.8))' }} className={styles.content}>{0}
                  </div>
                </div>
                {*第二行*}
                <div className={styles.grid}>
                  <div style={{ width: 'calc(100% / (24/2))' }} className={styles.title}>描述字段</div>
                    <div style={{ width: 'calc(100% / (24/22))' }} className={styles.content}>
                      <div className={styles.rowstyle}>
                        <p>描述值：<b>0</b></p>
                        <p>描述值：<b>0</b></p>
                        <p>描述值：<b>0</b></p>
                      </div>
                  </div>
                </div>
                {*第三行*}
                <div className={styles.grid}>
                  <div style={{ width: 'calc(100% / (24/2))' }} className={styles.title2}><p>描述字段</p></div>
                    <div style={{ width: 'calc(100% / (24/22))' }} className={styles.content}>
                      <div className={styles.rowstyle}>
                        <p>余额：<b>0</b></p>
                        <p>余额：<b>0</b></p>
                        <p>余额：<b>0</b></p>
                      </div>
                      <div className={styles.rowstyle}>
                        <p>余额：<b>0</b></p>
                        <p>余额：<b>0</b></p>
                        <p>余额：<b>0</b></p>
                      </div>
                  </div>
                </div>
                {*第四行*}
                <div className={styles.grid}>
                    <div style={{ width: 'calc(100% / (24/2))' }} className={styles.title2}><p>描述字段</p>
                    </div>
                    <div style={{ width: 'calc(100% / (24/22))' }} className={styles.content}>
                      <div className={styles.rowstyle}>
                        <p>余额：<b>0</b></p>
                        <p>余额：<b>0</b></p>
                        <p>余额：<b>0</b></p>
                      </div>
                      <div className={styles.rowstyle}>
                        <p>余额：<b>0</b></p>
                        <p>余额：<b>0</b></p>
                        <p>余额：<b>0</b></p>
                      </div>
                  </div>
                </div>
              </div>

样式：

.Descriptions {
    background: #fff;
    .grid {
        width: 100%;
        border-right: 1px solid #E0E0E0;
        display: table;

        >div {
            padding: 13px 16px !important;
            color: #435780;
            border: 1px solid;
            border-color: #E0E0E0;
            border-right: 0;
            border-bottom: 0;
            display: table-cell;

            &.title {
                background-color: rgb(250, 250, 250);
                color: #333;
                font-size: 14px;
                font-weight: 700;
            }
            &.title2 {
                background-color: rgb(250, 250, 250);
                color: #333;
                font-size: 14px;
                font-weight: 700;
                >p {
                    position: relative;
                    top: 18px;
                }
            }

            &.content {
                color: #2D3040;
                font-size: 14px;
                word-break: break-all; //20220531新增。解决内容为纯数字时不自动跳行导致宽度错位问题
                word-wrap: break-word; 
                >b {
                    font-size: 20px;
                    margin-left: 5px;
                }
            }
        }

        .rowstyle {
            display: flex;
            // flex-wrap: wrap;
            >p {
                width: 32%;
                font-weight: 500;
                padding: 5px;

                >b {
                    color: #6E1E1E;

                }
            }

        }

        &:last-child {
            >div {
                border-bottom: 1px solid #F0F0F0;
            }
        }
    }


    :global {
        .upload-list-inline {
            .ant-upload-list {
                >div {
                    display: inline-block;
                }
            }
        }
    }
}