CSS實(shí)現(xiàn)三欄布局的四種方法

發(fā)布時(shí)間：2024-03-11 14:11:04 作者：ZoeLandia

三欄布局是常見的一種頁(yè)面布局方式，將頁(yè)面分為左欄、中欄和右欄，這篇文中主要為大家詳細(xì)介紹了CSS實(shí)現(xiàn)三欄布局的四種方法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1. 什么是三欄布局

常見的一種頁(yè)面布局方式，將頁(yè)面分為左欄、中欄和右欄

左右兩側(cè)的盒子寬度固定，中間的盒子會(huì)隨屏幕自適應(yīng)

一般中間放主體內(nèi)容，左右兩邊放輔助內(nèi)容

2. 如何實(shí)現(xiàn)三欄布局

2.1 彈性布局

將最外層盒子設(shè)為彈性布局，左右兩邊的盒子固定寬度200px

將中間的盒子flex設(shè)為1

這樣中間盒子的寬度就能一直得到全部寬度減去左右盒子的寬度，這個(gè)寬度會(huì)隨著窗口的大小而變化

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        height: 200px;
    }
    .container{
        display: flex;
    }
    .left,.right{
        width: 200px;
        background: #66a4bd;
    }
    .middle{
        flex: 1;
        background: gray;
    }
</style>
<div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

缺點(diǎn)：先加載左邊容器的，左右兩邊往往是輔助內(nèi)容，這樣用戶體驗(yàn)不好

為了優(yōu)化這個(gè)問題，就出現(xiàn)了經(jīng)典的圣杯和 雙飛翼 布局，它們的目的就是為了在HTML結(jié)構(gòu)上，中間欄在最前面保證了最先渲染中間提升性能

2.2 grid布局

左右兩邊的寬度固定，將剩余的空間給中間的主體部分

要用到grid-template-columns：定義網(wǎng)格的列大小和數(shù)量

<style>
    .wrap {
        height: 200px;
        display: grid;
        grid-template-columns: 200px  1fr 200px;
    }
    .left {
        width: 200px;
        height: 100%;
        background-color: aqua;
    }
    .content {
        width: 100%;
        height: 100%;
        background-color: cadetblue;
        flex: 1;
    }
    .right {
        width: 200px;
        height: 100%;
        background-color: bisque;
    }
</style>
<div class="wrap">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
</div>

2.3 圣杯布局

先加載主體內(nèi)容，增加用戶體驗(yàn)

實(shí)現(xiàn)原理： float + margin負(fù)值 + position: relative

要保證中間欄最先加載，那就要把middle容器寫在前面

<body>
  <div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

給父容器添加`padding：0 200px，騰開位置

middle中間容器設(shè)置width：100%，此時(shí)的寬度繼承了父容器的100%

并給三個(gè)子容器都設(shè)置float: left，都向左浮動(dòng)，去到同一行

頁(yè)面效果：第一行位置放不下，左右兩個(gè)容器被擠到了第二行，按道理來(lái)說(shuō)它們應(yīng)該是在第一行兩塊紅色區(qū)域位置的

給左右容器相對(duì)定位，讓它們相對(duì)自己原本文檔流的位置進(jìn)行定位

.left{
      width: 200px;
      background: #76d1ea;
      position: relative;
      margin-left: -100%; //向左挪動(dòng)父容器寬度的100%
      left: -200px;  //再向左挪動(dòng)自身的200寬度
    }

此時(shí)right接替了left原本的位置，同理，這時(shí)候只需要給right設(shè)置：margin-right: -200px; ，就可以實(shí)現(xiàn)三欄布局了

有一個(gè)問題就是：

有一個(gè)最小寬度，當(dāng)頁(yè)面小于最小寬度時(shí)布局就會(huì)亂掉
由于設(shè)置了相對(duì)定位，所以當(dāng)left原來(lái)的位置和right的位置產(chǎn)生重疊時(shí)，由于浮動(dòng)的原因一行放不下就會(huì)換行
所以布局就被打亂了，使用雙飛翼布局就可以避免這個(gè)問題

<style>
    *{
    	margin: 0;
        padding: 0;
    }
    .container{
        height: 100px;
        padding: 0 200px;
    }
    .middle, .left, .right{
        height: 100%;
        float: left;
    }
    .middle{
        width: 100%;
        background: gray;
    }
    .left{
        width: 200px;
        background: #76d1ea;
        position: relative;
        margin-left: -100%; 
        left: -200px; 
    }
    .right{
        width: 200px;
        background: #76d1ea;
        position: relative;
        margin-right: -200px; 
    }
</style>
<div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

2.4 雙飛翼布局

先把HTML結(jié)構(gòu)稍微改造一下，在middle容器里面多用了個(gè)inner容器

<div class="container">
    <div class="middle">
    	<div class="inner">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

已經(jīng)設(shè)置了middle的width：100%，這時(shí)候我們只需要設(shè)置inner容器為padding：0 200px，我們要的效果同樣是把左右兩個(gè)容器擺放到對(duì)應(yīng)的紅框位置

left、middle、right同樣使用浮動(dòng)

left設(shè)置margin-left:-100%(父容器的整個(gè)寬度）

right設(shè)置margin-left：-200px

這樣便實(shí)現(xiàn)了三欄布局的效果，連定位都不使用，且當(dāng)頁(yè)面過(guò)小時(shí)，布局不會(huì)亂

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
    	height: 100px;
    }
    .middle, .left, .right{
    	float: left;
    	height: 100%;
    }
    .middle{
   		width: 100%;
    	background: gray;
    }
    .inner{
    	height: 100%;
   		padding: 0 200px;
    }
    .left{
        width: 200px;
        background: pink;
        margin-left: -100%;
    }
    .right{
        width: 200px;
        background: pink;
        margin-left: -200px;
    }
</style>
<div class="container">
  <div class="middle">
  	<div class="inner">middle</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

兩個(gè)布局結(jié)構(gòu)上不同：