vue实现左右布局(右侧超出的时候换行展示)

最新推荐文章于 2024-05-23 16:51:18 发布

小小liang

最新推荐文章于 2024-05-23 16:51:18 发布

阅读量1.5k

点赞数

分类专栏： vue&&js常用技巧文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47409897/article/details/131796150

版权

vue&&js常用技巧专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue实现左右布局(右侧超出的时候换行展示)

code

      <ul class="body-detail">
        <li>
          <div class="li-label">姓名</div>
          <div class="li-value">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
        </li>
        <li>
          <div class="li-label">身份证号码</div>
          <div class="li-value">XXXXXXXX</div>
        </li>
      </ul>
  .body-detail {
    li {
      display: flex;
      flex-flow:wrap;
      line-height: 30px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      .li-label {
        width: 80px;
        color: #323233;
        flex: 0 0 auto;
      }
      .li-value {
        width: calc(100% - 80px);
        color: #7E8299;
        flex: 1 1 auto; 
        word-wrap: break-word;
      }
    }
  }