CSS-常見兩欄、三欄佈局（雙飛翼佈局、聖盃佈局）

Jona發表於2020-03-11
CSS

兩欄佈局

左側定寬，右側自適應

1、右側設定絕對定位將其從文件流中刪除

//左側
width:200px;
//右側
position:absolute;
left:200px;
複製程式碼

2、浮動法

不利於頁面優化，右側主要內容後載入

//左側
float:left;
width:200px;
//右側
無需設定
複製程式碼

3、margin負值法

三欄佈局

兩邊固定寬度，中間隨瀏覽器自適應的佈局

1、利用絕對定位

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.container {
    position: relative;
}
.main {
    margin: 0 120px;
}
.left {
    position: absolute;
    width: 120px;
    left: 0;
}
.right {
    position: absolute;
    width: 120px;
    right: 0;
}
複製程式碼

2、浮動法

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div> ## main放最後
</div>

.left {
    float: left;
    width: 100px;
}
.right {
    width: 200px;
    float: right;
}
.main {
    margin-left: 120px;
    margin-right: 220px;
}
## 或者 觸發bfc，BFC區域，不會與浮動元素重疊
.main {
    overflow: hidden;
}
複製程式碼

缺點：主要內容模組無法最先載入，當頁面中內容較多時會影響使用者體驗

3、雙飛翼佈局

來源：出自淘寶前端UED團隊，它將內容比作鳥的身體，左右比作雙翼，所以叫作雙飛翼

原理：內容div裡再巢狀一個div，全部向左浮動，內容div的margin為左右div預留位置，左右div只設定margin負值即可實現。與聖盃佈局相比，少了position:relative，多了一個div。

<div class='content'>## main外包一層div
    <div class='main'>
    </div>
</div>
<div class='left'>
</div>
<div class='right'>
</div>

.content{
    float:left;
    width:100%;
}
.main{
    margin-left:200px;## 左側固定寬度
    margin-right:100px;## 右側固定寬度
}
.left{
    float:left;
    width:200px;
    margin-left:-100%;##回到上一行
}
.right{
    float:left;
    width:100px;
    margin-left:-100px;##right的寬度
}
複製程式碼

利用的是浮動元素 margin 負值，主體內容可以優先載入，HTML 程式碼結構稍微複雜點。

4、聖盃佈局

來源： 聖盃是曾經用來接耶穌的血，所以被基督徒看作聖物，聖盃流傳幾千年了，好像到現在也沒找到聖盃（西班牙疑似發現了，暫且不討論），畢竟流傳幾千年了尋找起來比較困難，所以常常用它來比喻難以尋找的事物。三欄佈局在web設計中，有很多解決方案但是每種方案都有缺點，所以業界對於完美解決三欄佈局的方案稱為聖盃佈局。

原理：設定內容、左、右全部往左浮動，父div的margin留出間距來，以放左、右div；然後在左、右通過margin-left和相對定位移動到要求位置。

<div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>
.container{## 給左右側預留寬度
    margin-left:220px;
    margin-right:120px;
}
.main{
    width:100%;
    float:left;
}
.left{
    float:left;
    width:200px;
    margin-left:-100%;##回到上一行 但緊挨main
    position:relative;
    left:-120px;
}
.right{
    float:left;
    width:100px;
    margin-left:-100px;
    position:relative;
    left:-120px;
}
複製程式碼

5、flex佈局

 <div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>
.container {
    display: flex;
}
.main {
    flex-grow: 1;
}
.left {
    order: -1;
    flex: 0 1 200px;
}
.right {
    flex: 0 1 100px;
}
複製程式碼

參考

juejin.im/entry/58957… blog.csdn.net/wangjun5159…

相關文章