一、浮动

            *{
                     margin: 0;
                     padding: 0;
                 }
             #left{
                 width: 200px;
                 height: 200px;
                 float: left;
                 background-color: red;
             }
             #right{
                 width: 150px;
                height: 200px;
                 float: right;
                 background-color: mistyrose;
             }
             #middle{
                 height: 200px;
                 margin: 0 150px 0 200px;
                 background-color: saddlebrown;            
                 word-break: break-word;    
             }

二、浮动+定位

             *{
                     margin: 0;
                     padding: 0;
             }            
             #middle{
                 position: absolute;
                 left: 200px;
                 right: 150px;
                 height: 200px;
                 background-color: red;
                word-break: break-word;
             }
             #left{
                 width: 200px;
                 height: 200px;
                 float: left;
                 background-color: blue;
             }
             #right{
                 width: 150px;
                 height: 200px;
                 float: right;
                 background-color: yellow;
             }

三、display:box

          *{
                 margin: 0;
                  padding: 0;
             }
             #content {
                 display: -webkit-box;
                 display: -moz-box;
                 width: 100%;
                 height: 200px;
             }
             
             #left {
                 width: 200px;
                 height: 200px;
                 background-color: saddlebrown;                
             }
             #middle{
                 -webkit-box-flex: 1;
                 -moz-box-flex: 1;
                 background-color: blue;
                 word-wrap: break-word;
             }
                 
             #right {
                 width: 200px;
                 height: 200px;
                 background-color: saddlebrown;
             
             }

四、flex

                /*flex*/
        .layout-flex{
            display: flex;
            margin-top: 140px;
        }
        .layout-flex div{
            min-height: 100px;
        }
        .layout-flex .left{
            width: 300px;
            background-color: red;
        }
        .layout-flex .right{
            width: 300px;
            background-color: green;
        }
        .layout-flex .center{
            flex:1;
            background-color: yellow;
                 }

五、表格

        /*table*/
        .layout-table{
            width: 100%;
            display: table;
        }
        .layout-table div{
            display: table-cell;
            height: 100px;
        }
        .layout-table .left{
            width: 300px;
            background-color: red;
        }
        .layout-table .right{
            width: 300px;
            background-color: green;
        }
        .layout-table .center{
            background-color: yellow;
        }

六、grid

         /*grid*/
        .layout-grid{
            display: grid;
            grid-template-rows: 100px; /*行高*/
            grid-template-columns: 300px auto 300px;/*三栏 宽度*/       
        }
        .layout-grid .left{
            background-color: red;
        }
        .layout-grid .right{
            background-color: green;
        }
        .layout-grid .center{
            background-color: yellow;
        }