三列布局-两列定最右自适应

两列定宽，最右列自适应，实现的几种方法如下：

1.利用float+margin值

#left {
            width:200px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
#center {
            width: 200px;
            height: 300px;
            background-color: blue;
            float: left;
        }
#right{
            height: 400px;
            background-color: blueviolet;
            margin-left: 400px;
        }

 <div id="left"></div>
 <div id="center"></div>
 <div id="right"></div>

2.利用float+overflow

 #left {
            width:200px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
 #center {
            width: 200px;
            height: 300px;
            background-color: blue;
            float: left;
        }
 #right{
            height: 400px;
            background-color: blueviolet;
            overflow: hidden;
        }

3.利用table+table-cell

 /* table等高布局 ，显示是400px的高*/
        #parent{
            display: table;
            width: 100%;
        }
        #left {
            width:200px;
            height: 300px;
            background-color: aqua;
            display: table-cell;      
        }
        #center {
            width: 200px;
            height: 300px;
            background-color: blue;
           display: table-cell;
        }
        #right{
            height: 400px;
            background-color: blueviolet;
           display: table-cell;
        }

4.利用flex

 #parent{
            display: flex;
            width: 100%;
        }
 #left {
            width:200px;
            height: 300px;
            background-color: aqua;           
        }
 #center {
            width: 200px;
            height: 300px;
            background-color: blue;          
        }
 #right{
            height: 400px;
            background-color: blueviolet;
           flex: 1;
        }

5.利用网格布局

 #parent{
            width: 100%;
            display: grid;
            grid-template-columns: 300px 300px auto;
        }
 #left {
            height: 300px;
            background-color: aqua;           
        }
        
 #center {
            height: 300px;
            background-color: blue;          
        }
 #right{
            height: 400px;
            background-color: blueviolet;
        }