CSS實現三欄布局 5種

常見的布局方式: float布局、position定位、table布局、彈性(flex)布局、網格(grid)布局

那麼我們就是用以上5種方式完成三欄布局，不過前提是左右寬度(假如左右寬度為300px),整個高度已知(假如高度為100px)，中間寬度自適應

float最初的設計的初衷是為了解決文字環繞的問題 ，即給乙個設定float屬性之後會使文字環繞在周圍顯示。float之所以可以實現文字環繞是源於設定float屬性的元素可以脫離文件流，使父元素高度塌陷。

好了知道了float的作用之後我們來實現三欄布局。

首先先  寫html模版**如下:

左右

中    

這裡我們給左右兩欄設定float屬性使其脫離文件流左邊欄設定 float:left, 右邊欄設定float: right ,由於寬度高度已知所以我們可以給其設定指定的寬高 width:300px, height:100px

.left

.right

.center

所以這兩個屬性還是需要新增的。到此位置float實現三欄布局已經ok了，這裡特別提醒由於我們使用了float, 所以為了不影響其他元素的顯示這裡需要清除浮動,清除浮動的方式有很多大家可以自行搜尋使用我這裡使用偽元素的方式  

.main::after

左中

右

position其屬性有5種 :

inherit: 繼承父元素的position屬性值

static: 預設值，沒有定位

fixed: 生成絕對定位的元素,相對於瀏覽器視窗進行定位（不管螢幕內容怎麼滑動,其位置不會改變）

relative:生成相對定位,相對於其正常位置進行定位

absolute:生成絕對定位的元素,相當於static定位以外的第乙個父元素進行定位。

根據以上內容我們可以看出我們需要選擇給 左 中 右 都使用 absolute 絕對定位，由於absolute 是相當於static定位以外的第乙個父元素進行定位，所以我們要給其父元素新增 position:relative屬性, 這樣這三個子元素可以相對于父元素進行絕對定位。

由此我們可以很簡單的寫出css樣式:

.left

.center
.right

首先先寫html模版: 這裡的html模版和 position使用的html一樣,這裡就不複製**了。

table是一種常見的布局方式,他可以將整個頁面按照**的方式設定為多行多列,但是由於書寫table標籤比較麻煩尤其是涉及到table內嵌table的時候，所以css給我們提供了display: table的方式可以讓讓們方便的使用table布局, 設定子元素為列的屬性為display:table-cell

了解了table布局的屬性那麼就可以寫出css樣式:

.main

.left,.center,.right
.left
.center
.right

首先先寫html模版: 這裡的html模版和 position使用的html一樣,這裡就不複製**了。

flex布局是w3c提出了一種新的方案，可以簡便、完整、響應式地實現各種頁面布局。

當給元素設定display:flex，則該元素就是乙個flex容器,其子元素就是容器成員,稱之為flex專案,每個專案預設按照從左到右方式排列，所以我們可以很輕鬆的寫出css樣式:

.main 

.left
.center
.right

網格它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。

將屬性display值設為grid或inline-grid就建立了乙個網格容器，所有容器直接子結點自動成為網格專案。

gird提供了 gird-template-columns、grid-template-rows屬性讓我們設定行和列的高、寬

根據屬性我們可以寫出如下css樣式:

.div

以上提供了5種實現三欄布局的方式那麼他們的優缺點呢？

1、float布局是現在用的比較多的布局很多門戶**目前使用這個布局方式,使用的時候只需要注意一定要清除浮動。

2、position布局只是根據定位屬性去直接設定元素位置,個人感覺不太適合用做頁面布局

3、table布局使用起來方便,相容性也不存在問題，不利於搜尋引擎抓取資訊

4、flex布局比較強大,但是還是存在ie上相容性問題，只能支援到ie9以上

5、grid布局很強大，但是相容性很差。

CSS實現三欄布局 5種

常見的布局方式 float布局 position定位 table布局 彈性 flex 布局 網格 grid 布局 那麼我們就是用以上5種方式完成三欄布局，不過前提是左右寬度 假如左右寬度為300px 整個高度已知 假如高度為100px 中間寬度自適應 float最初的設計的初衷是為了解決文字環繞的問...

CSS實現 兩欄布局，三欄布局

aside div main div div aside main 左側欄固定寬度向左浮動，右側主要內容則用margin left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin right空出其寬度即可。aside d...

三種方法實現CSS三欄布局

本文由雲 社群發表 本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 doctype html en utf 8 css實現三欄布局1 title text css body left middle ri...