image.png
有幾種解決方案呢？
1. float方案
<style>
.layout_float .left-right-center .left {
float: left;
width: 300px;
height: 500px;
background-color: aqua;
}
.layout_float .left-right-center .right {
float: right;
width: 300px;
height: 500px;
background-color: red;
}
.layout_float .left-right-center .center {
height: 500px;
background-color: blue;
}
.layout_float .left-right .left {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
.layout_float .left-right .right {
background-color: yellow;
height: 300px;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>
浮動(dòng)解決方案：三欄布局
</h1>
</div>
</article>
實(shí)現(xiàn)原理：
左右欄分別浮動(dòng)在窗口兩邊忿檩，且已經(jīng)脫離文檔流，中間塊(處于文檔流中)受左右浮動(dòng)影響被卡在中間無(wú)法繼續(xù)向左右伸展已達(dá)到自適應(yīng)。
缺點(diǎn)：
- dom元素需要遵循搔课，左-右-中的書(shū)寫(xiě)順序，否則會(huì)出現(xiàn)中間內(nèi)容鋪滿整行截亦，右邊元素下沉的情況爬泥。
- 當(dāng)中間高度超出的情況會(huì)出現(xiàn)中間區(qū)域溢出。
優(yōu)化方案：
清除浮動(dòng)或創(chuàng)建BFC
<style>
.layout_float .left-right-center .left {
float: left;
width: 300px;
height: 300px;
background-color: aqua;
}
.layout_float .left-right-center .right {
float: right;
width: 300px;
height: 300px;
background-color: red;
}
.layout_float .left-right-center .center {
margin-left: 300px;
margin-right: 300px;
background-color: blue;
}
.layout_float .left-right .left {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
.layout_float .left-right .right {
background-color: yellow;
height: 300px;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>
浮動(dòng)解決方案：三欄布局
</h1>
</div>
</article>
2. 絕對(duì)定位方案
<style>
.layout_absolute .left-right-center>div{
position: absolute;
height: 300px;
}
.layout_absolute .left {
left:0;
background-color: aqua;
width: 300px;
}
.layout_absolute .right {
right:0;
width: 300px;
background-color: red;
}
.layout_absolute .center {
left:300px;
right: 300px;
background-color: blue;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>
絕對(duì)定位解決方案
</h1>
</div>
</article>
實(shí)現(xiàn)原理：
使元素脫離文檔流崩瓤，進(jìn)行絕對(duì)定位袍啡。
缺點(diǎn)：
由于容器脫離了文檔流，導(dǎo)致子元素也必須脫離文檔流
3. flex布局方案
在 Flexbox 模型中却桶，有三個(gè)核心概念：
– flex境输，需要布局的元素
– flex容器
– 排列方向（direction），決定了 flex 項(xiàng)的布局方向
image.png
<style>
.layout_flexbox {
margin-top: 20px;
}
.layout_flexbox * {
height: 300px;
}
.layout_flexbox .left-right-center {
display: flex;
flex-direction: row;
}
.layout_flexbox .left {
width: 300px;
background-color: red;
}
.layout_flexbox .right {
width: 300px;
background-color: blue;
}
.layout_flexbox .center {
flex: 1;
background-color: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>
flex解決方案
</h1>
</div>
<div class="right"></div>
</article>
缺點(diǎn)：
瀏覽器兼容性不太好颖系，em...
4. table布局
<style>
.left-right-center {
display: table;
width: 100%;
}
.left-right-center > div {
display: table-cell;
}
.left {
width: 300px;
background-color: yellow;
}
..center {
background-color: blue;
}
.right {
width: 300px;
background-color: red;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>
table布局解決方案
</h1>
</div>
<div class="right"></div>
</article>
優(yōu)點(diǎn)：
兼容性很好嗅剖，設(shè)置簡(jiǎn)單
缺點(diǎn)：
- 無(wú)法設(shè)置欄邊距，左中右模塊間無(wú)間隔
- 對(duì)SEO不夠友好
- 當(dāng)一個(gè)格高度增加嘁扼，其余的格也會(huì)被動(dòng)增加高度
5. 網(wǎng)格布局
先了解下網(wǎng)格布局的基本定義吧窗悯！
Grid Container：設(shè)置了 display: gird 的元素。 是所有g(shù)rid item的直接父項(xiàng)偷拔。
重要屬性：
-
display將元素定義為 grid contaienr蒋院，并為其內(nèi)容建立新的網(wǎng)格格式化上
下文。 -
grid-template-columns / grid-template-rows:使用多個(gè)值來(lái)定義網(wǎng)格的列和行莲绰。這些值表示每個(gè)網(wǎng)格的大小
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
Grid Item:Grid 容器的孩子（直接子元素）欺旧。
解決方案：
<style>
.layout_grid {
display: grid;
width: 100%;
grid-template-rows: 300px;
grid-template-columns: 200px auto 200px;
}
.left {
background-color: red;
}
.main {
margin: 0 20px;
background-color: green;
}
.right {
background-color: blue;
}
</style>
<article class=" layout_grid">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</article>
