CSS三欄佈局

時間 2019-11-26

標籤 css 佈局欄目 CSS 简体版

原文原文鏈接

1、絕對定位css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                position: relative;
            }
            .left{
                position: absolute;
                top: 0;
                right: 0;
                width: 100px;
                height: 100px;
                background: blue;
            }
            .right{
                position: absolute;
                top: 0;
                right: 0;
                width: 100px;
                height: 100px;
                background: green; 
            }
            .center{
                margin: 0px 100px;
                height: 100px;
                background: gray;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="left">left</div>
            <div class="center">center</div>
            <div class="right">rigth</div>
        </div>
    </body>
</html>

2、浮動html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .left{
                float: left;
                width: 100px;
                height: 100px;
                background-color: blue;
            }
            .right{
                float: right;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .center{
                height: 100px;
                margin: 0 100px;
                background-color: green;
            }
        </style>
    </head>

    <body>
        <div>
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="center">center</div>
        </div>
    </body>
</html>

3、聖盃佈局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                height: 100px;
                padding: 0 100px 0 100px;
            }
            .center{
                float: left;
                width: 100%;
                height: 100%;
                background: #808080;
            }
            .left{
                position: relative;
                left: -100px;
                float: left;
                width: 100px;
                height: 100%;
                background: red;
                margin-left: -100%;
            }
            .right{
                position: relative;
                right: -100px;
                float: left;
                width: 100px;
                height: 100%;
                background: green;
                margin-left: -100px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <!-- 中間的 div 必須寫在最前面 -->
            <div class="center">center</div>
            <div class="left">left</div>
            <div class="right">rigth</div>
        </div>
    </body>
</html>

　　1.中間盒子的寬度設置爲 width: 100%; 獨佔一行；flex

　　2.使用負邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；
　　　　.left {margin-left:-100%;} 把左邊的盒子拉上去
　　　　.right {margin-left：-右邊盒子寬度px;} 把右邊的盒子拉上去spa

　　3.父盒子設置左右的 padding 來爲左右盒子留位置；code

　　4.對左右盒子使用相對佈局來佔據 padding 的空白，避免中間盒子的內容被左右盒子覆蓋；htm

4、雙飛翼blog

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                height: 100px;
            }
            .center{
                float: left;
                width: 100%;
                height: 100%;
                background: #808080;
            }
            .center-inner{
                margin: 0 100px;
            }
            .left{
                float: left;
                width: 100px;
                height: 100%;
                background: red;
                margin-left: -100%;
            }
            .right{
                float: left;
                width: 100px;
                height: 100%;
                background: green;
                margin-left: -100px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <!-- 中間的 div 必須寫在最前面，而且中間的盒子再套一個div -->
            <div class="center">
                <div class="center-inner">center</div>
            </div>
            <div class="left">left</div>
            <div class="right">rigth</div>
        </div>
    </body>
</html>

　　1.中間盒子的寬度設置爲 width: 100%; 獨佔一行；utf-8

　　2.使用負邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；文檔

　　3.在中間盒子裏面再添加一個 div，而後對這個 div 設置 margin-left 和 margin-right來爲左右盒子留位置；

5、聖盃和雙飛翼異同

　　聖盃佈局和雙飛翼佈局解決的問題是同樣的，都是兩邊定寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。

　　兩種方法基本思路都相同：首先讓中間盒子 100% 寬度佔滿同一高度的空間，在左右兩個盒子被擠出中間盒子所在區域時，使用 margin-left 的負值將左右兩個盒子拉回與中間盒子同一高度的空間。接下來進行一些調整避免中間盒子的內容被左右盒子遮擋。

　　主要區別在於如何使中間盒子的內容不被左右盒子遮擋：
　　　　聖盃佈局的方法：設置父盒子的 padding 值爲左右盒子留出空位，再利用相對佈局對左右盒子調整位置佔據 padding 出來的空位；
　　　　雙飛翼佈局的方法：在中間盒子裏再增長一個子盒子，直接設置這個子盒子的 margin 值來讓出空位，而不用再調整左右盒子。

　　簡單提及來就是雙飛翼佈局比聖盃佈局多建立了一個 div，但不用相對佈局了，少設置幾個屬性。

6、Flexbox

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                display: flex;
                flex-direction: row;
                height: 100px;
            }
            .left{
                flex-basis: 100px;
                height: 100%;
                background: #0000FF;
            }
            .center{
                flex-grow: 1;
                height: 100%;
                background: gray;
                
            }
            .right{
                flex-basis: 100px;
                height: 100%;
                background: #0000FF;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="left">left</div>
            <div class="center">center</div>
            <div class="right">rigth</div>
        </div>
    </body>
</html>

相關標籤/搜索

每日一句

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