使用的是vue框架，i標籤的class用的element

HTML

<div class="index">
    <div class="left" :class="{fold: isFold}">
        <span class="fold-button" @click="foldClick">
          <i class="el-icon-arrow-right" :class="{right: isFold}"></i>
        </span>
    </div>
    <div class="right"></div>
</div>
複製程式碼

CSS

.index{
    display: table;
    table-layout: fixed;
    width: 100%;
    .left{
        width: 200px; // 左側欄寬度
        display: table-cell;
        position: relative;
        &.fold{ // 摺疊
            width: 0;
        }
    }
    .right{
        pading: 20px;
    }
    .fold-button{
    display: inline-block;
    padding: 20px 5px;
    border-radius: 0 3px 3px 0;
    border: 1px solid #ddd;
    border-left: none;
    background: #fff;
    position: absolute;
    left: 100%;
    top: 20%;
    cursor: pointer;
        >i{
            transform: rotate(0);
            transition: .5s all;
            &.right {
                transform: rotate(180deg);
            }
        }
    }
}
複製程式碼

JS

export default {
  components: {
  },
  data () {
    return {
      isFold: false
    }
  },
  methods: {
    foldClick () {
      this.isFold = !this.isFold
    }
  }
}
複製程式碼

總結：index使用table佈局，寬度為100%，table-layout設定為fixed，left為table-cell，寬度展開為200px，收起為0，這樣就達到左側可摺疊，右側寬度自適應的效果