假設高度已知，請寫出三欄佈局，其中左欄右欄寬度各爲300px，中間自適應

時間 2019-11-10

原文原文鏈接

一、浮動佈局

.layout.float .left{
                     float: left;
                     width: 300px;
                     background: red;
                 }
                 .layout.float .right{
                     float: right;
                     width: 300px;
                     background: blue;
                 }
                 .layout.float .center{
                     background: yellow;
                 }

二、絕對佈局

.layout.absolute .left-right-center>div {
                     position: absolute;
                 }
                 .layout.absolute .left{
                     left : 0;
                     width : 300px;
                     background : red;
                 }
                 .layout.absolute .center{
                     left : 300px;
                     right : 300px;
                     background : yellow;
                 }
                 .layout.absolute .right{
                     right:0;
                     width:300px;
                     background:blue;
                 }

三、彈性佈局

.layout.flexbox{
                     margin-top : 140px;
                 }
                 .layout.flexbox .left-center-right {
                     display: flex;
                 } 
                 .layout.flexbox .left{
                     width : 300px;
                     background : red;
                 }
                 .layout.flexbox .center{
                     flex : 1;
                     background : yellow;
                 }
                 .layout.flexbox .right{
                     width : 300px;
                     background : blue;
                 }

四、表格佈局

.layout.table .left-center-right {
                     width : 100%;
                     display : table;
                     height: 100px;
                 }
                 .layout.table .left-center-right>div {
                     display : table-cell;
                 }
                 .layout.table .left {
                     width : 300px;
                     background : red;
                 }
                 .layout.table .center {
                     background : yellow;
                 }
                 .layout.table .right {
                     width : 300px;
                     background : blue;
                 }

五、網格佈局

.layout.grid .left-center-right {
                     display : grid;
                     width : 100%;
                     grid-template-rows: 100px;
                     grid-template-columns : 300px auto 300px;
                 }
                 .layout.grid  .left{
                     background : red;
                 }
                 .layout.grid  .center{
                     background : yellow;
                 }
                 .layout.grid  .right{
                     background : blue;
                 }

六、所有代碼部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>layout</title>
        <style media="screen">
            html *{
                padding: 0;
                margin: 0;
            }
            .layout {
                margin-top : 20px;
            }
            .layout article div{
                min-height : 100px;
            }
        </style>
    </head>
    <body>
         <!-- 1 浮動佈局 -->
         <section class ="layout float">
             <style media = "screen">
    /* 經過把多個類選擇器連接在一塊兒，僅能夠選擇同時包含這些類名的元素（類名的順序不限）
    .layout.float (二者之間無空格)
    例如：  .layout.float { color: red; }
    <div class="layout float">被選擇的元素</div> */
                 .layout.float .left{
                     float: left;
                     width: 300px;
                     background: red;
                 }
                 .layout.float .right{
                     float: right;
                     width: 300px;
                     background: blue;
                 }
                 .layout.float .center{
                     background: yellow;
                 }
             </style>
             <article class = "left-right-center">
                 <div class="left"></div>
                 <div class="right"></div>
                 <div class="center">
                     <h1>浮動解決方案</h1>
                     <p>一、這是三欄佈局中間部分</p>
                     <p>二、這是三欄佈局中間部分</p>
                 </div>
             </article>
         </section>
            
         <!-- 2 絕對佈局 -->
         <section class = "layout absolute">
             <style>
                 .layout.absolute .left-right-center>div {
                     position: absolute;
                 }
                 .layout.absolute .left{
                     left : 0;
                     width : 300px;
                     background : red;
                 }
                 .layout.absolute .center{
                     left : 300px;
                     right : 300px;
                     background : yellow;
                 }
                 .layout.absolute .right{
                     right:0;
                     width:300px;
                     background:blue;
                 }
             </style>
                <article class = "left-right-center">
                    <div class="left"></div>
                    <div class="right"></div>
                    <div class="center">
                        <h1>絕對定位解決方案</h1>
                        <p>一、這是三欄佈局絕對定位中間部分</p>
                        <p>二、這是三欄佈局絕對定位中間部分</p>                        
                    </div>
                </article>
         </section>
        
         <!-- 3 彈性佈局 -->
         <section class="layout flexbox">
             <style>
                 .layout.flexbox{
                     margin-top : 140px;
                 }
                 .layout.flexbox .left-center-right {
                     display: flex;
                 } 
                 .layout.flexbox .left{
                     width : 300px;
                     background : red;
                 }
                 .layout.flexbox .center{
                     flex : 1;
                     background : yellow;
                 }
                 .layout.flexbox .right{
                     width : 300px;
                     background : blue;
                 }
             </style>
             <article class = "left-center-right">
                 <div class = "left"></div>
                 <div class = "center">
                     <h2>flexbox解決方案</h2>
                     <p>一、這是三欄佈局flexbox中間部分</p>
                     <p>二、這是三欄佈局flexbox中間部分</p>
                 </div>
                 <div class = "right"></div> 
             </article>
         </section>

         <!-- 4 表格佈局 -->
         <section class="layout table">
             <style>
                 .layout.table .left-center-right {
                     width : 100%;
                     display : table;
                     height: 100px;
                 }
                 .layout.table .left-center-right>div {
                     display : table-cell;
                 }
                 .layout.table .left {
                     width : 300px;
                     background : red;
                 }
                 .layout.table .center {
                     background : yellow;
                 }
                 .layout.table .right {
                     width : 300px;
                     background : blue;
                 }
             </style>
             <article class ="left-center-right">
                 <div class = "left"></div>
                 <div class = "center">
                     <h2>表格佈局</h2>
                     <p>一、這是三欄佈局表格佈局中間部分</p>
                     <p>二、這是三欄佈局表格佈局中間部分</p>
                 </div>
                 <div class = "right"></div>
             </article>
         </section>

         <!-- 5 網格佈局 -->
         <section class = "layout grid">
             <style media="screen">
                 .layout.grid .left-center-right {
                     display : grid;
                     width : 100%;
                     grid-template-rows: 100px;
                     grid-template-columns : 300px auto 300px;
                 }
                 .layout.grid  .left{
                     background : red;
                 }
                 .layout.grid  .center{
                     background : yellow;
                 }
                 .layout.grid  .right{
                     background : blue;
                 }
             </style>
             <article class = "left-center-right">
                 <div class = "left"></div>
                 <div class = "center">
                        <h2>網格佈局</h2>
                        <p>一、這是三欄佈局網格佈局中間部分</p>
                        <p>二、這是三欄佈局網格佈局中間部分</p>
                 </div>
                 <div class = "right"></div>
             </article>
         </section>
    </body>
</html>