如何用css實現三欄水平佈局？

主要就是將頁面分為三部分：left、right、main。

接下來我們來看css程式碼：

<style>
    .container{
        width: 100%;
        height: 600px;

    }
    .left{
        position: absolute;
      left: 0px;
        background-color: #558888;
        width: 200px;
        top: 0px;
        height:600px;
    }
    .right{
        position: absolute;
        background-color: peachpuff;
        right: 0px;
        width: 300px;
        top: 0px;
        height: 600px;

    }
    .main{
        width: auto;
        background-color: greenyellow;
        margin-left: 200px;
        margin-right: 300px;
        top: 0px;
        height: 600px;

    }
</style>

在這裡我先定義了一個container選擇器，作用是定義最大寬度和高度，相當於一個容器。然後分別定義left、right、main。

html程式碼：

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

將定義的選擇器分別在div塊層中引用，最終效果圖：