左右两列左(右)对齐

73 阅读1分钟

image.png

代码如下:

 <div className='notice-content__box'>
 
      <div className='notice-content__item'>
        {
          extensionMap?.length > 0 && extensionMap.map((el: any, index: number) => {
            return <div className={cls('item label', { 'no-name-item': !showSubject })} key={index}>{el.key}</div>
          })
        }
      </div>
      
      <div className='notice-content__item item-value'>
        {
          extensionMap?.length > 0 && extensionMap.map((el: any, index: number) => {
            return <div className={cls('item', { 'no-name-item': !showSubject })} key={index}>{el.value}</div>
          })
        }
      </div >
      
 </div >
    
  .notice-content__box {
    width: 100%;
    display: flex;
    align-items: center;

    .notice-content__item {
      .item {
        height: 20px !important;
        line-height: 20px;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0;
        color: #191919;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .label {
        color: #999 !important;
      }

      .item + .item {
        margin-top: 6px;
      }

      .no-name-item + .no-name-item {
        margin-top: 8px !important;
      }
    }

    .item-value {
      overflow: hidden;
    }

    .notice-content__item + .notice-content__item {
      margin-left: 22px;
    }
  }
}