前端CSS（1）之兩列布局和三列布局

zhunny發表於2019-03-13

網頁佈局就是將網頁根據不同的內容進行劃分，這樣做不僅可以美化網頁外觀，還可以讓使用者對你的網頁功能一目瞭然，提升使用者體驗。
兩列布局和三列布局是我們最常見的兩種佈局，我今天總結一下實現這兩種佈局的多種方式。本文程式碼沒有考慮相容性。

兩列布局

側欄寬度固定，左邊內容部分寬度自適應。header和footer高度固定。

利用浮動來佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        #aside {
            height: calc(100% - 100px);
            width: 200px;
            text-align: center;
            background-color: aquamarine;
            float: left;
        }
        
        #main {
            height: calc(100% - 100px);
            width: calc(100% - 200px);
            background-color: #eee;
            text-align: center;
            overflow: hidden; //使其成為BFC，清除浮動，因為浮動也是一個BFC，兩個BFC不會重疊
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製程式碼

利用絕對定位來佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #app {
            position: relative;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        #footer {
            position: absolute;
            bottom: 0;
            width: 100%
        }
        
        #aside {
            /* height: calc(100% - 100px); */
            width: 200px;
            text-align: center;
            background-color: aquamarine;
            position: absolute;
            left: 0;
            bottom: 50px;
            top: 50px;
        }
        
        #main {
            /* height: calc(100% - 100px); */
            width: calc(100% - 200px);
            background-color: #eee;
            text-align: center;
            position: absolute;
            right: 0;
            bottom: 50px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製程式碼

利用伸縮盒flex來佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #app {
            display: flex;
            flex-wrap: wrap;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
            flex-basis: 100%;
        }
        
        #aside {
            width: 200px;
            height: calc(100% - 100px);
            text-align: center;
            background-color: aquamarine;
        }
        
        #main {
            height: calc(100% - 100px);
            width: calc(100% - 200px);
            background-color: #eee;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製程式碼

利用網格grid來佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #app {
            display: grid;
            grid-template-columns: 200px auto;
            grid-template-rows: 50px auto 50px;
            grid-template-areas: "header header" "aside main" "footer footer"
        }
        
        #header,
        #footer {
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        #header {
            grid-area: header;
        }
        
        #footer {
            grid-area: footer
        }
        
        #aside {
            grid-area: aside;
        }
        
        #main {
            grid-area: main;
        }
        
        #aside {
            text-align: center;
            background-color: aquamarine;
        }
        
        #main {
            background-color: #eee;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製程式碼

三列布局

兩邊側欄寬度固定，中間內容部分寬度自適應。header和footer高度固定。

利用浮動float來佈局

float元素是有浮動範圍的，在它的包含塊中，如果它之前有內容，會阻止它向上浮動，因此在不要求content元素首先渲染的情況下我們才會用浮動佈局，因為此時content元素必須位於浮動元素下方。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        #aside1,
        #aside2 {
            height: calc(100% - 100px);
            width: 200px;
            text-align: center;
            background-color: aquamarine;
        }
        
        #aside1 {
            float: left;
        }
        
        #aside2 {
            float: right;
        }
        
        #main {
            height: calc(100% - 100px);
            background-color: #eee;
            text-align: center;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside1">aside</aside>
        <aside id="aside2">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製程式碼

利用absolute定位來實現佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #app {
            position: relative;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        #footer {
            position: absolute;
            bottom: 0;
            width: 100%
        }
        
        #aside1,
        #aside2 {
            /* height: calc(100% - 100px); */
            width: 200px;
            text-align: center;
            background-color: aquamarine;
        }
        
        #aside1 {
            position: absolute;
            left: 0;
            bottom: 50px;
            top: 50px;
        }
        
        #aside2 {
            position: absolute;
            right: 0;
            bottom: 50px;
            top: 50px;
        }
        
        #main {
            /* height: calc(100% - 100px); */
            width: calc(100% - 400px);
            background-color: #eee;
            text-align: center;
            position: absolute;
            right: 200px;
            bottom: 50px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <main id="main">main</main>
        <aside id="aside1">aside</aside>
        <aside id="aside2">aside</aside>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製程式碼

利用flex和grid佈局

它們的佈局方式與兩列布局時的方式大同小異，這裡就不多加闡述。我們來總結一下實際網頁三列布局中會用的兩種佈局：聖盃佈局和雙飛翼佈局。

聖盃佈局和雙飛翼佈局

聖盃佈局

為了中間content不被遮擋，為外層section設定了padding，使得邊側欄有地方放。且利用了margin為負對浮動元素的影響。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        section {
            padding: 0 200px;
            height: calc(100% - 100px);
            /* height: 100px; */
        }
        
        #main {
            float: left;
            background-color: #eee;
            text-align: center;
            height: 100%;
            width: 100%;
        }
        
        #aside1,
        #aside2 {
            float: left;
            width: 200px;
            height: 100%;
            background-color: aquamarine;
            position: relative;
            text-align: center;
        }
        
        #aside1 {
            left: -200px;
            margin-left: -100%;
        }
        
        #aside2 {
            right: -200px;
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <section id="section">
            <main id="main">main</main>
            <aside id="aside1">aside1</aside>
            <aside id="aside2">aside2</aside>
        </section>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製程式碼

雙飛翼佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app {
            height: 100%;
        }
        
        #header,
        #footer {
            height: 50px;
            background-color: burlywood;
            text-align: center;
            line-height: 50px;
        }
        
        section {
            float: left;
            height: calc(100% - 100px);
            width: 100%;
            /* height: 100px; */
        }
        
        #main {
            background-color: #eee;
            text-align: center;
            height: 100%;
            margin: 0 200px;
        }
        
        #aside1,
        #aside2 {
            float: left;
            width: 200px;
            height: calc(100% - 100px);
            background-color: aquamarine;
            text-align: center;
        }
        
        #aside1 {
            margin-left: -100%;
        }
        
        #aside2 {
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <section id="section">
            <main id="main">main</main>
        </section>
        <aside id="aside1">aside1</aside>
        <aside id="aside2">aside2</aside>
        <p style="clear:both"></p>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
複製程式碼

CSS-多列布局1-概述
2017-08-18
CSS
CSS columns 多列布局
2019-05-28
CSS
CSS columns多列布局瀑布流
2019-05-28
CSS
淺談CSS3多列布局
2016-11-14
CSSS3
小侃CSS3——多列布局
2018-01-08
CSSS3
4種實現多列布局css
2015-01-07
CSS
CSS3嚐鮮（一）：CSS多列布局
2010-01-18
CSSS3
CSS3之多列布局columns詳解
2018-01-25
CSSS3
CSS自動居中一列布局
2016-09-15
CSS
CSS-多列布局2-斷行
2017-08-18
CSS
CSS-多列布局3-瀑布流
2017-08-19
CSS
div css三列布局效果例項程式碼
2017-02-23
CSS
CSS-佈局5-Calc三列布局
2017-08-13
CSS
用margin實現兩列布局中的自適應列
2016-02-20
bootstrap完美實現5列布局
2018-08-17
boot
GridLayoutManager 實現複雜列布局
2019-03-26
css實現的網頁三列布局效果程式碼例項
2017-03-30
CSS網頁
bootstrap深入理解之格子布局
2016-05-12
boot
99%的前端新手都不懂的8大布局
2019-04-29
前端
三列布局，中間自適應，關於float和positon方法
2019-02-16
android5大布局
2015-07-17
Android
css經典佈局系列三——三列布局(聖盃佈局、雙飛翼佈局)
2019-04-21
CSS
flex三列布局中間寬度自適應佈局
2017-10-19
Flex
Android動畫效果之自定義ViewGroup新增布局動畫
2016-08-25
Android動畫View
精讀《磁貼布局 - 功能實現》
2022-12-14
中間寬度自適應的三列布局程式碼例項
2017-04-11
Rectangle Pro for Mac,視窗布局增強工具
2023-04-18
Mac
Rectangle Pro for Mac(視窗布局增強工具)
2023-02-21
Mac
Android 五大布局講解與應用
2016-02-28
Android
Android之四大元件、六大布局、五大儲存
2018-07-10
Android元件
周立功布局BLE領域-Nordic空中升級淺談
2018-11-22
Android Notes｜細數「十大布局」那些事兒
2020-12-07
Android
Android UI控制元件系列：Tab Layout（選項卡布局）
2014-11-29
AndroidUI控制元件
優酷十年古永鏘發內部信：和阿里同行會做更大布局
2015-11-23
阿里
Magnet：最佳化你的Mac視窗布局，提升工作效率
2023-11-16
Mac
視窗布局管理軟體：Mosaic for Mac v1.4啟用版
2023-12-14
AIMac
視窗布局管理工具：Mosaic for mac v1.3.3直裝版
2023-11-29
AIMac
強大的視窗布局增強工具:Rectangle Pro啟用最新版
2023-11-30