HTML div左中右布局

<template>
  <div id="wai">
    <div class="divleft">

    </div>
    <div class="divmiddle">
    
       
    </div>
    <div class="divright">
     
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
       
      }
    },
    methods: {
      
      },
    },
  }
</script>

<style lang="scss" scoped>
  #wai {
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    //border: 2px solid rgb(14, 14, 17);
    // padding: 10px;
    // overflow: hidden;
  }
  .divleft {
    float: left;
    width: 30%;
    //height: 790px;
    height: 100%;
    //position: absolute;
    //border: 1px solid rgb(14, 14, 17);
    overflow: auto;
  }
  .divmiddle {
    float: left;
    width: 30%;
    //height: 790px;
    height: 100%;
    //position: absolute;
    //border: 1px solid rgb(14, 14, 17);
    overflow: auto;
  }
  .divright {
    float: right;
    width: 30%;
    height: 100%;
    //height: 100%;
    //position: absolute;
    //border: 1px solid rgb(14, 14, 17);
    overflow: auto;
  }
</style>