CSS實(shí)現(xiàn)三欄布局的四種方法
我要評(píng)論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è)問(wèn)題，就出現(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è)問(wèn)題就是：
- 有一個(gè)最小寬度，當(dāng)頁(yè)面小于最小寬度時(shí)布局就會(huì)亂掉
- 由于設(shè)置了相對(duì)定位，所以當(dāng)left原來(lái)的位置和right的位置產(chǎn)生重疊時(shí)，由于浮動(dòng)的原因一行放不下就會(huì)換行
- 所以布局就被打亂了，使用雙飛翼布局就可以避免這個(gè)問(wèn)題
<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)上不同：
相同：讓三列浮動(dòng)，通過(guò)負(fù)外邊距形成三列布局
不同：在于如何處理中間主列的位置
圣杯布局：利用父容器的左、右內(nèi)邊距 + 兩個(gè)列的相對(duì)定位
雙飛翼布局：把主列嵌套在一個(gè)新的父級(jí)塊中，并利用主列的左、右外邊距進(jìn)行布局調(diào)整
以上就是CSS實(shí)現(xiàn)三欄布局的四種方法的詳細(xì)內(nèi)容，更多關(guān)于CSS三欄布局的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
CSS實(shí)現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)三欄布局中間一欄自適應(yīng)且隨文字大小變化寬度的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需2020-06-02
這篇文章主要介紹了CSS經(jīng)典三欄布局方案（6種方法）的相關(guān)資料,詳細(xì)的介紹了6種三欄布局的方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-12-01
本篇文章主要介紹了淺談CSS三欄布局的Ｎ種實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-18- 可能有人不理解三欄布局是什么，其實(shí)三欄布局頁(yè)面分為左中右三部分，然后對(duì)中間一部分做自適應(yīng)的一種布局方式，下面這篇文章就給大家詳細(xì)介紹了CSS實(shí)現(xiàn)三欄布局的四種方法2017-01-24
css實(shí)現(xiàn)兩欄布局，左側(cè)固定寬，右側(cè)自適應(yīng)的多種方法
今天通過(guò)7種方法給大家介紹css實(shí)現(xiàn)兩欄布局，左側(cè)固定寬，右側(cè)自適應(yīng)效果，每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-08-04
淺談CSS 多欄布局（Multi-Columns Layout）
這篇文章主要介紹了淺談CSS 多欄布局（Multi-Columns Layout）的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-20- 左中右分欄在頁(yè)面布局中非常實(shí)用也很常見，符合大眾的瀏覽習(xí)慣，那么如何輕松簡(jiǎn)單實(shí)現(xiàn)呢？下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-28
