css實現三欄自適應佈局（兩邊固定，中間自適應）以及優缺點

時間 2019-12-13

原文原文鏈接

方法一：絕對定位（absolute + margin）

原理：給左右兩邊的元素設置absolute，這樣左右兩邊的元素脫離標準文檔流的控制，中間的元素天然會上來，而後給中間的元素設置margin留出左右兩邊元素的位置，也就是說margin-left = 「左邊元素的寬度」 margin-right = "右邊元素的寬度"瀏覽器

優勢：三個div的順序是任意的佈局

缺點：要對樣式進行初始化，不然元素間會出現空隙，由於使用了absolute，若是頁面還有其餘內容處理時要當心！flex

注：隨着瀏覽器窗口縮小，會發生壓縮，左右元素重疊spa

代碼：3d

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .left,.right{
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .left{
            background-color: green;
            left: 0;
        }
        .right{
            background-color: blue;
            right: 0;
        }
        .center{
            height: 200px;
            margin-left: 200px;
            margin-right: 200px;
            background-color: red;
        }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

效果：code

方法二：自身浮動（float）

原理：給左右元素分別設置左浮動和右浮動，這樣左右元素就脫離了標準文檔流的控制，但中間的元素還在標準文檔流中，以後給中間的元素設置margin，設置方法同方法一blog

優勢：受外界因素影響小文檔

缺點：三個div的順序有固定性，由於中間的元素任然在文檔流中，因此要放在最後面，左右元素順序不固定，這也是與絕對定位不一樣的地方it

注：隨着瀏覽器窗口縮小，右邊元素會被擠到下一行io

代碼：

 <style>
        .left,.right{
            width: 200px;
            height: 200px;
        }
        .left{
            background-color: green;
            float: left;
        }
        .right{
            background-color: blue;
            float: right;
        }
        .center{
            height: 200px;
            margin-left: 200px;
            margin-right: 200px;
            background-color: red;
        }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

效果：

方法三：聖盃佈局（BFC+負margin）

原理：使用margin負值法，使用聖盃佈局首先須要將中間元素用div包住，設置float使其造成一個BFC，而且要設置寬度，整個寬度和左邊元素的margin負值要相互配合，也就是margin-left = "-中間元素外層div寬度" ，右邊元素的margin負值要和它本身的寬度配合，也就是margin-left = 「-右邊元素寬度」

優勢：三欄有相互關聯性，有抗性

缺點：三個元素的順序也是固定的，中間元素要放置在最前面，左右元素順序不固定，而且左元素的margin-left = "中間元素外層div寬度"

注：隨着瀏覽器窗口縮小，會發生壓縮，左右元素重疊，繼續縮小以後右邊元素會又會被擠到下一行，可是同方法二有不一樣

代碼：

<style>
        .wrap{
            width: 100%;
            float: left;
        }
        .left,.right{
            width: 200px;
            height: 200px;
        }
        .left{
            background-color: green;
            float: left;
            margin-left: -100%;
        }
        .right{
            background-color: blue;
            float: left;
            margin-left: -200px;
        }
        .center{
            height: 200px;
            background-color: red;
        }
</style>
<body>
    <div class="wrap">
        <div class="center">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

效果：

方法四：flex佈局

原理：將左中右三個元素用div包裹起來，給外層div設置display:flex，以後給中間元素設置flex:1

優勢：解決了以前方式帶來的問題，例如浮動

缺點：三個元素的順序也是固定的，中間元素要放在中間，不能兼容IE8及如下瀏覽器。

注：隨着瀏覽器窗口的縮小，會發生壓縮，可是不會重疊和換行

代碼：

<style>
        .wrap{
            width: 100%;
            display: flex;
        }
        .left,.right{
            width: 200px;
            height: 200px;
        }
        .left{
            background-color: green;
        }
        .right{
            background-color: blue;
        }
        .center{
            flex: 1;
            height: 200px;
            background-color: red;
        }
</style>
<div class="wrap">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
</div>

效果：

注：其實還有網格佈局和表格佈局

相關標籤/搜索

每日一句

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