溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS實(shí)現(xiàn)三列布局方法有哪些

發(fā)布時(shí)間：2020-08-31 14:12:59 來源：億速云 閱讀：152 作者：小新 欄目：web開發(fā)

CSS實(shí)現(xiàn)三列布局方法有哪些？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

三列布局指的是兩邊兩列定寬，中間的寬度自適應(yīng)。

常用三種方法：

  • 定位

  • 浮動(dòng)

  • 彈性盒布局

定位方式

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定位方法創(chuàng)建三列布局</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
        position: absolute; /* 絕對(duì)定位，使位置固定 */
        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; /* 絕對(duì)定位，使位置固定 */
        right: 0;
        top: 0;
    }

    </style>
</head>
<body>
    <div>Left</div>
    <div>Center</div>
    <div>Right</div>
</body>
</html>

結(jié)果

CSS實(shí)現(xiàn)三列布局方法有哪些

浮動(dòng)方法

讓左右兩邊部分浮動(dòng)，脫離文檔流后對(duì)中間部分使用margin來自適應(yīng)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮動(dòng)法創(chuàng)建三列布局</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>
</head>
<body>
    <div>Left</div>
    <div>Right</div>
    <div>Center</div>  <!-- 左右部分脫離文檔流，中間部分平鋪 -->
</body>
</html>

彈性盒布局

使用容器包裹三欄，并將容器的display設(shè)置為flex，左右兩部分寬度設(shè)置為固定，中間flex設(shè)置為1，左右兩邊的值固定，所以中間的自適應(yīng)

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>彈性盒子創(chuàng)建三列布局</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>
</head>
<body>
    <div>
        <div>Left</div>
        <div>Center</div>  
        <div>Right</div>
    </div>
</body>
</html>

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)CSS實(shí)現(xiàn)三列布局方法有哪些大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手