绝对布局

<template>
    <div>
    <div class="wrap2 wrap">
        <div class="left"></div>
        <div class="center">
            绝对定位布局
        </div>
        <div class="right"></div>
    </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style>
      .wrap2 div{
            position: absolute;
            min-height: 200px;
        }
        .wrap2 .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .wrap2 .right{
            right: 0;
            width: 300px;
            background: blue;
        }
        .wrap2 .center{
            left: 300px;
            right: 300px;
            background: pink;
        } 
</style>
<!-- 绝对定位布局快捷，但是有效性比较差，因为脱离了文档流。 -->