css的經典三欄布局如何實作,CSS的經典三欄布局如何實作

這次給大家帶來CSS的經典三欄布局如何實作，實作CSS的經典三欄布局的注意事項有哪些，下面就是實戰案例，一起來看一下。

本文介紹了CSS經典三欄布局方案，分享給大家，也給自己做個筆記，具體如下：

三欄布局，顧名思義就是兩邊固定，中間自适應。三欄布局在開發十分常見

1. float布局

最簡單的三欄布局就是利用float進行布局。首先來繪制左、右欄：

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right {

float: right;

width: 100px;

height: 200px;

background-color: yellow;

}

接下來再來看中間欄如何處理。我們知道對于float元素，其會脫離文檔流，其他盒子也會無視這個元素。(但其他盒子内的文本依然會為這個元素讓出位置，環繞在周圍。)是以此時隻需在container容器内添加一個正常的div，其會無視left和right，撐滿整個container，隻需再加上margin為left right流出空間即可：

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right {

float: right;

width: 100px;

height: 200px;

background-color: yellow;

}

.main {

background-color: green;

height: 200px;

margin-left: 120px;

margin-right: 120px;

}

.container {

border: 1px solid black;

}

優勢：簡單

劣勢：中間部分最後加載，内容較多時影響體驗

2. BFC 規則

BFC(塊格式化上下文)規則規定：BFC不會和浮動元素重疊。是以如果将main元素設定為BFC元素即可：

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right {

float: right;

width: 100px;

height: 200px;

background-color: yellow;

}

.main {

background-color: green;

height: 200px;

overflow: hidden;

}

3. 聖杯布局

聖杯布局的核心是左、中、右三欄都通過float進行浮動，然後通過負值margin進行調整。

第一步，先來看下基本布局

.left {

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right {

float: left;

width: 100px;

height: 200px;

background-color: yellow;

}

.main {

float: left;

width: 100%;

height: 200px;

background-color: blue;

}

此時看到的效果是：左、右兩欄被擠到第二行。這是因為main的寬度為100%。接下來我們通過調整左、右兩欄的margin來将左、中、右放在一行中：.left {

float: left;

width: 100px;

height: 200px;

margin-left: -100%;

background-color: red;

}

.right {

float: left;

width: 100px;

height: 200px;

margin-left: -100px;

background-color: yellow;

}

第二步，将left的margin-left設定為-100%，此時左欄會移動到第一行的首部。然後再将right的margin-left設定為其寬度的負值：-100px，則右欄也會移動到和左、中欄一行中：

不過此時還沒有大功告成，我們試着在main中加入一些文字：

fjlskdjflkasjdfljasdljlsjdljsdjflksadj

可以看到文字被壓住了，接下來就要解決這個問題。

第三步，給container一個padding，該padding應該正好等于左、右欄的寬度：.container {

padding-left: 100px;

padding-right: 100px;

}

此時看到的結果是左、中、右三欄都整體收縮了，但文字依然被壓住了。

第四步，給左、右兩欄加上相對布局，然後再通過設定left和right值向外移動：.left {

float: left;

width: 100px;

height: 200px;

margin-left: -100%;

position: relative;

left: -100px;

background-color: red;

}

.right {

float: left;

width: 100px;

height: 200px;

margin-left: -100px;

position: relative;

right: -100px;

background-color: yellow;

}

到此為止，大功告成：

相信看了這些案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

相關閱讀：

html5怎樣做出圖檔轉圈的動畫效果

在h5裡手機端頁面縮放應該如何實作

怎樣用H5 Canvas實作3D動态Chart圖表

H5的FileReader分布讀取檔案應該如何使用以及其方法簡介