2. 程式人生 > 其它 >實現三欄佈局

實現三欄佈局

阿新 • • 發佈：2021-02-02

技術標籤：HTMLhtmlcsscss3html5

實現三欄佈局

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

Flex

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

<!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配合實現也是可行的。

<!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區域不會與浮動元素重疊的特性實現三欄佈局。

<!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佈局即表格的樣式，實現三欄佈局。

<!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佈局則是將容器劃分成行和列，產生單元格，然後指定成員所在的單元格，可以看作是二維佈局。

<!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

相關推薦

CSS實現三欄佈局（左邊固定、右邊固定、中間自適應）的五種方式

一、float佈局 程式碼： <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

實現三欄佈局

技術標籤：HTMLhtmlcsscss3html5 實現三欄佈局 三欄佈局在開發十分常見，即兩邊固定寬度，中間自適應寬度的佈局。

【Css】使用彈性盒實現三欄佈局

<!doctype html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\"

前端幾種三欄佈局實現，聖盃、雙飛翼、flex、BFC、絕對定位、calc計算

1、聖盃佈局 中間先載入，父元素設定左右padding是左右兩個固定div的寬度，設定margin-left使左右兩個元素與middle重疊，通過相對定位left設定左右兩個元素位移，形成左中右三欄佈局。

三欄佈局實現方式

1.float+margin <div class=\"wrapper\"> <div class=\"left\"></div> <div class=\"right\"></div>

如何用CSS實現左側寬度固定，右側自適應（兩欄佈局）？左右固定中間自適應（三欄佈局）呢？

在前端日常佈局中，會經常遇到左側寬度固定，右側自適應或者左右兩邊固定，中間部分自適應的實用場景。本文例子中將列舉出兩種常用的兩欄佈局，左側固定右側自適應的常用方法以及程式碼和五種左右固定中間自適應的常

[前端知識點]css三欄佈局

技術標籤：前端知識點css定位 [前端知識點]css三欄佈局 前言一、float佈局二、position佈局三、table佈局四、flex佈局五、grid佈局

三欄佈局，中間自適應

1.浮動 <div class=\"left \"></div><div class=\"right \"></div><div class=\"center\"></div>

vue實現多欄佈局拖拽

本文例項為大家分享了實現多欄佈局拖拽的具體程式碼，供大家參考，具體內容如下

兩欄佈局三種方式實現

1. 實際上類似 三欄佈局，仍然是三種實現方式：浮動、定位、flex 【1】float + margin-left / BFC（overflow: hidden;）

移動端H5固定底部導航選單的三種佈局實現

需求： 需要把導航固定在底部？只能滑動內容，導航選單固定不動的。效果如下：

雙欄·三欄（聖盃，雙飛翼）佈局方法

1. 兩欄佈局,左邊定寬 1. <div id=\"left\">左邊定寬</div> <div id=\"right\">右邊自適應,前端前端前端前端前端前端前端前端前端前端</div>

第9天, 滑動門技術, 兩欄 三欄自適應佈局(聖盃,雙飛翼), 登高佈局, 文字溢位處理 ,單行,多行溢位

day 09 一、滑動門技術 1、什麼是滑動門？ 不管文字多少都能夠適應特殊背景的這種效果，就需要用到滑動門技術

“width+padding+position百分比-實現響應式佈局” and “a標籤的使用” and “背景圖的設定” and “三目運算在標籤中的使用”

技術標籤：# JavaScript# CSS / C3 <template> <ul> <li v-for=(item, idx) in list> <a

實現瀑布流佈局的三種方式

前言 今天逛閒魚的時候觀察到每一行的高度不是相同的，經瞭解才知道原來這是一種瀑布流佈局，感覺挺有意思，於是決定研究一下，在網上也找了一些方案，實現瀑布流大概有3種方式。

左右兩欄佈局實現

在前端面試中，經常會被問到兩欄佈局問題，即左欄寬度固定，右欄佔滿剩餘空間。

unity3D實現三維物體跟隨滑鼠

本文例項為大家分享了unity3D實現三維物體跟隨滑鼠的具體程式碼，供大家參考，具體內容如下

使用Flutter實現一個走馬燈佈局的示例程式碼

走馬燈是一種常見的效果，本文講一下如何用 PageView 在 Flutter 裡實現一個走馬燈,效果如下，當前頁面的高度比其它頁面高，切換頁面的時候有一個高度變化的動畫。實現這樣的效果主要用到的是 PageView.builder 部件

Mysql資料庫實現多欄位過濾的方法

我國移動網際網路進入了飛速發展階段，網際網路人才日益受到企業的重視，其中PHP開發人才便是其中之一，在網際網路旅遊、金融、餐飲、娛樂、社交等一些新興企業與軟體開發企業中，PHP開發崗位相對佔有核心地位，今天

Python tkinter三種佈局例項詳解

這篇文章主要介紹了Python tkinter三種佈局例項詳解,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下