實現三欄佈局

時間 2021-02-01

標籤 css html git github 瀏覽器佈局 post flex code orm 欄目 CSS 简体版

原文原文鏈接

實現三欄佈局

三欄佈局在開發十分常見，即兩邊固定寬度，中間自適應寬度的佈局。css

Flex

使用CSS3的flex佈局實現三欄佈局，Flex佈局也稱彈性佈局，能夠爲盒狀模型提供最大的靈活性，是佈局的首選方案，現已獲得全部現代瀏覽器的支持，此處主要是利用flex容器成員默認按照主軸排列，以及利用flex屬性即flex-grow，flex-shrink和flex-basis的簡寫形式將間的塊自適應撐起。html

<!DOCTYPE html>
<html>
<head>
    <title>FLEX</title>
    <style type="text/css">
        .container{
            display: flex;
            height: 200px;
            border: 1px solid #eee;
        }
        .container > div{
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            flex: 1;
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Calc

經過CSS的calc能夠動態計算中間部分的長度從而作到自適應，calc能夠配合inline-block行內塊級元素實現三欄佈局，注意使用行內塊級元素的時候若是編寫HTML時換行，這個空白的換行也會做爲元素解析從而會產生空白間隙，因此在編寫時此處不要換行，此外calc經過與float配合實現也是可行的。git

<!DOCTYPE html>
<html>
<head>
    <title>Calc</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container > div{
            display: inline-block;
            height: 100%;
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            width: calc(100% - 400px);
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div><div class="main">main</div><div class="right">right</div>
    </div>
</body>
</html>

BFC

BFC塊級格式化上下文Block Formatting Context，是Web頁面的可視CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其餘元素交互的區域，是用於佈局塊級盒子的一塊渲染區域，而且與這個區域的外部毫無關係，是一個獨立的區域，是一個環境，在這裏利用BFC區域不會與浮動元素重疊的特性實現三欄佈局。github

<!DOCTYPE html>
<html>
<head>
    <title>BFC</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            display: flex; /* BFC可觸發條件之一：彈性元素，display爲flex或inline-flex元素的直接子元素。 */
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="main">main</div>
        
    </div>
</body>
</html>

Margin

這個方法是使使左右模塊各自向左右浮動，並設置中間模塊的margin值使中間模塊寬度自適應。瀏覽器

<!DOCTYPE html>
<html>
<head>
    <title>Margin</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            margin-left: 200px;
            margin-right: 200px;
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="main">main</div>
        
    </div>
</body>
</html>

Float

使用Float配合margin實現三欄佈局，主要是margin的負值的應用。佈局

<!DOCTYPE html>
<html>
<head>
    <title>Float</title>
    <style type="text/css">
        .container{
            height: 200px;
            border: 1px solid #eee;
        }
        .container div{
            color: #fff;
            height: 100%;
        }
        .container > .left{
            float: left;
            width: 200px;
            margin-left: -100%;
            background-color: #19be6b;
        }
        .container > .main-container{
            float: left;
            width: 100%;
        }
        .container > .main-container > .main{
            margin-left: 200px;
            margin-right: 200px;
            background-color: #2979ff;
        }
        .container > .right{
            float: right;
            width: 200px;
            margin-left: -200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main-container">
            <div class="main">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Table

利用table佈局即表格的樣式，實現三欄佈局。post

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style type="text/css">
        .container{
            display: table;
            height: 200px;
            width: 100%;
            border: 1px solid #eee;
        }
        .container > div{
            display: table-cell;
            color: #fff;
        }
        .container > .left{
            width: 200px;
            background-color: #19be6b;
        }
        .container > .main{
            background-color: #2979ff;
        }
        .container > .right{
            width: 200px;
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Grid

目前CSS佈局方案中,網格佈局能夠算得上是最強大的佈局方案了。它能夠將網頁分爲一個個網格，而後利用這些網格組合作出各類各樣的佈局。Grid佈局與Flex佈局有必定的類似性，均可以指定容器內部多個成員的位置。不一樣之處在於，Flex佈局是軸線佈局，只能指定成員針對軸線的位置，能夠看做是一維佈局。Grid佈局則是將容器劃分紅行和列，產生單元格，而後指定成員所在的單元格，能夠看做是二維佈局。flex

<!DOCTYPE html>
<html>
<head>
    <title>Grid</title>
    <style type="text/css">
        .container{
            height: 200px;
            display: grid;
            grid-template-columns: 200px auto 200px;
            border: 1px solid #eee;
        }
        .container > div{
            color: #fff;
        }
        .container > .left{
            background-color: #19be6b;
        }
        .container > .main{
            background-color: #2979ff;
        }
        .container > .right{
            background-color: #fa3534;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
</body>
</html>

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://zhuanlan.zhihu.com/p/25070186
https://juejin.cn/post/6844903686758465550
https://juejin.cn/post/6844904062224171021

相關標籤/搜索

每日一句

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