CSS如何實現三列佈局？實現三列佈局的3種方法（程式碼範例）

本篇文章帶給大家的內容是介紹CSS如何實現三列佈局？實現三列佈局的3種方法（程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

三列佈局指的是兩邊兩列定寬，中間的寬度自適應。

常用三種方法：

• 定位

• #浮動

• 彈性盒子佈局

定位方式

最直觀和容易理解的一種方法，左右兩欄選擇絕對定位，固定在頁面的兩側，中間的主體選擇用margin確定位置

nbsp;html>


    <meta>
    <title>定位方法创建三列布局</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
        position: absolute; /* 绝对定位，使位置固定 */
        left: 0;
        top: 0;
    }
    .center{
        height: 600px;
        background-color: purple;
        margin: 0 300px 0 200px;   /* 通过外边距确定宽度 */
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
        position: absolute; /* 绝对定位，使位置固定 */
        right: 0;
        top: 0;
    }

    </style>


    <div>Left</div>
    <div>Center</div>
    <div>Right</div>

結果

浮動方法

######################################## ###讓左右兩邊部分浮動，脫離文檔流後對中間部分使用margin來自適應###

nbsp;html>


    <meta>
    <title>浮动法创建三列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
        float: left;
    }
    .center{
        height: 600px;
        background-color: purple;
        margin: 0 300px 0 200px;
        min-width: 100px;  /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
        float: right;
    }
    </style>


    <div>Left</div>
    <div>Right</div>
    <div>Center</div>  <!-- 左右部分脱离文档流，中间部分平铺 -->

#######彈性盒佈局########使用容器包裹三欄，並將容器的display設定為flex，左右兩部分寬度設定為固定，中間flex設定為1，左右兩邊的值固定，所以中間的自適應###

 nbsp;html>


    <meta>
    <title>弹性盒子创建三列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
        }
        .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
    }
    .center{
        height: 600px;
        flex: 1;
        background-color: purple;
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
    }
    </style>


    <div>
        <div>Left</div>
        <div>Center</div>  
        <div>Right</div>
    </div>

以上是CSS如何實現三列佈局？實現三列佈局的3種方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！