幾種常見的三列布局，中間自適應，兩邊定寬

時間 2019-11-26

原文原文鏈接

在這裏，介紹幾種我所瞭解到的幾種三列布局。實現的方法分別是：html

兩邊絕對定位，中間設置margin-left和margin-right。佈局
兩邊分別左右浮動，中間設置margin-left和margin-right。flex
聖盃佈局。code
雙飛翼佈局。htm
BFC佈局，左邊左浮動，設置margin-right：120px，右邊右浮動，設置margin-left：120px，設置中間部分：overflow: hidden, 造成BFC。文檔
flex，這裏就沒有單獨介紹了。it

看代碼：io

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        .container {
            width: 100%;
            margin-bottom: 20px;
        }
        .main {
            height: 200px;
            background: red;
        }
        .left, .right {
            width: 100px;
            height: 200px;
            background: #999;
        }

        /*絕對定位*/
        .absolute {
            position: relative;
        }
        .absolute .left {
            position: absolute;
            left: 0;
            top: 0;
        }
        .absolute .right {
            position: absolute;
            right: 0;
            top: 0;
        }
        .absolute .main {
            margin-left: 120px;
            margin-right: 120px;
        }

        /*浮動定位*/
        .float .left {
            float: left;
        }

        .float .right {
            float: right;
        }
        
        .float .main {
            margin-left: 120px;
            margin-right: 120px;
        }

        /*聖盃佈局*/
        .shengbei .main, .shengbei .left, .shengbei .right {
            float: left;
        }

        .shengbei .left {
            margin-left: -100%;
            position: relative;
            left: -120px;
        }

        .shengbei .right {
            margin-left: -100px;
            position: relative;
            right: -120px;
        }

        .shengbei .main {
            width: 100%;
        }
        
        /*這裏用了box-sizing， 兼容性不是很好*/
        .shengbei.clearfix {
            box-sizing: border-box;
            padding-left: 120px;
            padding-right: 120px;
        }

        ..clearfix::after {
            content: '';
            display: block;
            clear: both;
        }


        /*雙飛翼佈局*/
        .fly .main {
            width: 100%;
            background: #fff !important;
        }
        .fly .main, .fly .left, .fly .right {
            float: left;
        }   
        .fly .left {
            margin-left: -100%;
        }
        .fly .right {
            margin-left: -100px;
        }
        .fly .main .inner {
            margin-left: 120px;
            margin-right: 120px;
            background: red;
            height: 200px;
        }

        /*bfc佈局*/
        .bfc .left {
            float: left;
            margin-right: 20px;
        }

        .bfc .right {
            float: right;
            margin-left: 20px;
        }
        
        .bfc .main {
            overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="container absolute">
        <div class="left"></div>
        <div class="main">absolute</div>
        <div class="right"></div>
    </div>

    <div class="container float">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main">float: 由於浮動脫離了文檔流，因此將main放在最後。</div>
    </div>
    
    <div class="container shengbei clearfix">
        <div class="main">聖盃佈局，main放在最前面，最開始渲染</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    <div class="container fly clearfix">
        <div class="main">
            <div class="inner">
                雙飛翼佈局: 注意取消main的背景顏色，設置inner的顏色和高度。
            </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <div class="container bfc">
        <div class="left">margin-right: 20px;</div>
        <div class="right">margin-left: 20px;</div>
        <div class="main">bfc佈局: overflow: hidden;</div>
    </div>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。