Use positioning to realize left, middle and right layout, and the middle content is adaptive

There are two ways to locate ：

1、 Left and right positioning , The middle is normal ;
2、 Both left, middle and right use positioning ;

The first method ：( Be careful div.center The location of )

.box{
    
	position: relative;
}
.left{
    
    position:absolute;
    left: 0;
    width:200px;
}

.right{
    
    position:absolute;
    right: 0;
    width:200px;
}
.center{
    
    padding:0 200px;
}

<div class="box">
  	<div class="left"> I am on the left </div>
    <div class="right"> I'm on the right </div>
    <div class="center"> I'm the middle </div>
    <!-- Be careful center The location of ,!!!! To the end , Because positioning is out of the document flow does not occupy a high degree -->
</div>

The second method

.box{
    
	position: relative;
}
.left{
    
    position:absolute;
    left: 0;
    width:200px;
}

.right{
    
    position:absolute;
    right: 0;
    width:200px;
}
.center{
    
    position: absolute;
    left: 200px;
    right:200px;
}

<div class="box">
  	<div class="left"> I am on the left </div>
    <div class="center"> I'm the middle </div>
    <div class="right"> I'm on the right </div>
</div>