三種方法實現CSS三欄佈局

時間 2019-11-30

標籤三種方法實現 css 佈局欄目 CSS 简体版

原文原文鏈接

本文由雲+社區發表css

做者：前端林子html

本文會分別介紹三種CSS實現三欄佈局的方法，可在瀏覽器中打開查看效果前端

1.方法一：自身浮動的方法

實現方法：須要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS實現三欄佈局1</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .left{
            width:200px;
            height: 300px;
            background-color: #DC698A;

            float:left;

        }
        .middle{
            /*width:100%;*/
            /*中間欄不要設寬度，包括100%*/
            height: 300px;
            background-color: #8CB08B;

            margin:0 200px;
        }
        .right{
            width: 200px;
            height: 300px;
            background-color: #3EACDD;

            float: right;
        }
    </style>
</head>
<body>
    <!-- 左欄左浮右欄右浮，中間不設寬度用左右margin值撐開距離，且佈局中中間欄放最後 -->
    <!-- 中間欄實際寬度是當前屏的100% -->
    <div class="left">左欄</div>
    <div class="right">右欄</div>
    <div class="middle">中間欄</div>
</body>
</html>

注意：該方法在html佈局時，要把中間欄放在左欄、右欄後面，左欄和右欄的順序不定佈局

實現的效果以下：3d

自身浮動實現三欄佈局code

2.方法二：margin負值法

實現方法：兩邊兩欄寬度固定，中間欄寬度自適應，左欄、右欄、中間欄向左浮動，左欄的margin-left設爲-100%，中間欄的width設爲100%，右欄的margin-left設爲-右欄寬度htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS實現三欄佈局2</title>
    <style type="text/css">
    body{
        margin:0;
        padding:0;
    }
    .left{
        width:200px;
        height: 300px;
        background-color: #DC698A;

        float:left;
        margin-left:-100%;
    }
    .middle{
        width:100%;
        height: 300px;
        background-color: #8CB08B;

        float:left;
    }
    .right{
        width:200px;
        height: 300px;
        background-color: #3EACDD;

        float: left;
        margin-left: -200px;
    }
    </style>
</head>
<body>
    <!-- 左欄中間欄右欄左浮，左欄margin-left：-100%，中間欄寬100%,，右欄margin-left:-右欄寬度 
    且佈局上必須中間欄放第一個-->
    <div class="middle">中間欄</div>
    <div class="left">左欄</div>
    <div class="right">右欄</div>
</body>
</html>

注意：該方法在html佈局時，要把中間欄放在第一個blog

此方法是實現聖盃佈局和雙飛翼佈局的基礎。get

實現的效果以下：

margin負值法實現三欄佈局

3.方法三：絕對定位法

實現方法：左欄、右欄絕對定位，分別固定到頁面左右兩側，中間欄不設寬度，用左右margin來撐開距離

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS實現三欄佈局3</title>
    <style type="text/css">
        body{
            margin:0;
            padding: 0;
        }
        .left{
            width:200px;
            height: 300px;
            background-color: #DC698A;

            position: absolute;
            left:0;
            top:0;
        }
        .middle{
            /*width: 100%;*/
            height: 300px;
            background-color: #8CB08B;
            margin:0 200px;
        }
        .right{
            width:200px;
            height: 300px;
            background-color: #3EACDD;

            position: absolute;
            right:0;
            top:0;
        }
    </style>
</head>
<body>
    <!-- 左右兩欄絕對定位，分別固定到頁面的左右兩側，中間欄不設寬度，用左右margin撐開距離 -->
    <!-- 中間欄的實際寬度是當前屏的100% -->
    <div class="left">左欄</div>
    <div class="middle">中間欄</div>
    <div class="right">右欄</div>
</body>
</html>

實現的效果以下：

此文已由騰訊雲+社區在各渠道發佈

獲取更多新鮮技術乾貨，能夠關注咱們騰訊雲技術社區-雲加社區官方號及知乎機構號