高度已知，左右寬度固定，實現三欄布局的5種方法

最後更新：2017-10-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

俗話說好記性不如爛筆頭，寫代碼也是一樣的道理，看過的東西如果不寫一遍真的在腦子裡呆不了多久。所以工作這麼久慢慢把以前記錄過的知識搬上來，一是為了分享，二是更好的總結！好了話不多說，進入正題。

第一種方法：float

<style>    *{        padding:0;        margin:0;    }    .big div{        height:100px;    }    .big .left{        width:300px;        float:left;        background:red;    }    .big .right{        width:300px;        float:right;        background:yellow;    }    .big .center{        background:blue;    }</style><body><div class="big">    <div class="left">           </div>    <div class="right">          </div>    <div class="center">        浮動解決方案    </div></div>

第一種解決方案基本上沒有什麼難度，平時應該也會用到很多！

第二種方法：絕對位置

 <style>
 .position{
        margin-top:10px;
    }
    .position>div{
        position:absolute;
        height:100px;
    }
    .position .left{
        left:0;
        width:300px;
        background:red;
    }
     .position .right{
        right:0;
        width:300px;
        background:yellow;
    }
    .position .center{
        left:300px;
        right:300px;
        background:blue;
    }
</style>
<body>
<div class="position">
    <div class="left">
       
    </div>
    <div class="right">
      
    </div>
    <div class="center">
        絕對位置方案2
    </div>
</div>
</body>

第二種方法也是輕鬆實現效果。

第三種方法：flexbox

<style> .flex{        margin-top:120px;        display:flex;    }    .flex>p{        height:100px;    }    .flex .left{        width:300px;        background:red;    }    .flex .center{        flex:1;        background:blue;    }    .flex .right{        width:300px;        background:yellow;    }</style><body><p class="flex">    <p class="left">           </p>    <p class="center">        flex方案    </p>    <p class="right">          </p></p></body>

第四種方法：表格版面配置

<style>.table{        margin-top:10px;        width:100%;        display:table;        height:100px;    }    .table>p{        display:table-cell;    }     .table .left{        width:300px;        background:red;    }    .table .center{        background:blue;    }    .table .right{        width:300px;        background:yellow;    }</style>

<body><p class="table">    <p class="left">           </p>    <p class="center">        table方案    </p>    <p class="right">          </p></p></body>

table方案同樣實現，只是現在我們可能已經很少使用表格版面配置了。

第五種方法：網格布局grid

<style>  .grid{        margin-top:10px;        display:grid;        width:100%;        grid-template-rows:100px;        grid-template-columns: 300px auto 300px;    }    .grid .left{        background:red;    }    .grid .center{        background:blue;    }    .grid .right{        background:yellow;    }</style><body><p class="grid">    <p class="left">           </p>    <p class="center">        grid方案    </p>    <p class="right">          </p></p></body>

網格布局方法也是實現了，CSS3的網格布局有點類似於bootstrap的柵格化布局，都是以網格的方式來劃分元素所佔的區塊。

問題沒有結束，我們繼續討論。五種解決方案哪一個更好呢？筆者一直認為技術沒有好壞之分，完全取決於你用在什麼地方。

個人認為五種方法的優缺點：

1.浮動：相容性好，如果對相容性有明確的要求使用浮動應該滿足需求，但是一定要處理好與周邊元素的關係，因為一不注意浮動就可能造成頁面配置混亂等問題，不過解決浮動帶來的副作用方法也不少這裡我們不做討論。

2.絕對位置：簡單直接，但是會使父元素脫離正常文檔流裡面的子項目也會跟著脫離。

3.flex:目前看來比較完美，不過現在稍微完美一點的技術都存在或多或少的相容性問題，同樣這個樣式IE8下是不支援的！（IE呀！）

4.表格版面配置：表格版面配置雖然沒有什麼大的問題，但是在我們要細化結構的時候會顯得很繁瑣，同時表格版面配置三個儲存格的高度會一起變動也不利於我們進行布局。

5.網格布局：代碼優美簡潔，不過還是相容性問題。但是未來是美好的！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More